@font-face { font-family: "PT Sans"; src: url("../fonts/pt-sans-cyrillic-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Sans"; src: url("../fonts/pt-sans-latin-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Sans"; src: url("../fonts/pt-sans-cyrillic-700.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Sans"; src: url("../fonts/pt-sans-latin-700.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Russo One"; src: url("../fonts/russo-one-cyrillic-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Russo One"; src: url("../fonts/russo-one-latin-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@property --turn-progress {
    syntax: '<angle>';
    inherits: false;
    initial-value: 360deg;
}

@property --healing-progress {
    syntax: '<angle>';
    inherits: true;
    initial-value: 360deg;
}

:root {
    --bg: #12110e;
    --ink: #d8d0b8;
    --muted: #8a8068;
    --accent: #c4a15a;
    --hp: #8a2a22;
    --ap: #2a6a4a;
    --exp: #4a4a7a;
    --danger: #c4453a;
    --line: #3a3428;
    --glass: rgba(16, 14, 10, 0.9);
    --metal: linear-gradient(#3a3830, #1e1c18);
    --pad: 10px;
    --dock-h: 118px;
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

/* Тонкие скроллбары в цветах игры — везде, включая саму страницу. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) #100c09;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: #100c09; }
*::-webkit-scrollbar-thumb { background: #5a4a30; border: 1px solid #100c09; }
*::-webkit-scrollbar-thumb:hover { background: var(--accent); }
*::-webkit-scrollbar-corner { background: #100c09; }

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--ink);
    font: 13px/1.35 "PT Sans", "Trebuchet MS", "Segoe UI", sans-serif;
}

.body { min-height: 100dvh; }
.body--game { height: 100dvh; overflow: hidden; overscroll-behavior: none; }
.app { min-height: 100dvh; }
.body--game .app { height: 100dvh; }

a, .link { color: var(--accent); }
.dim, .muted { color: var(--muted); }
.ok { color: #7aaa7a; }
.bad { color: var(--danger); }

.link {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

/* ---------- элементы ---------- */

.btn {
    appearance: none;
    border: 1px solid #6a5a38;
    background: var(--metal);
    color: var(--ink);
    padding: 7px 12px;
    font: inherit;
    cursor: pointer;
    text-align: center;
    min-height: 34px;
}
.btn:hover:not(:disabled), .btn:focus-visible { border-color: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; border-color: #40392e; background: #12100d; color: #70695d; }
.btn--ghost { background: transparent; }
.btn--tiny { padding: 4px 10px; min-height: 30px; font-size: 12px; }
.btn--big { padding: 10px 18px; min-height: 42px; }
.btn--danger { border-color: #7a3a30; color: #e0a49a; }
/* Общая кнопка с иконкой: иконка серая, пока кнопку не навели или не сфокусировали. Так же ведут себя иконки HUD и вкладок зданий. */
.btn--icon { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding: 6px 18px; font-size: 16px; line-height: 1.1; text-align: center; }
.btn--icon .ic { width: 28px; height: 28px; flex: 0 0 28px; margin: 0; vertical-align: 0; object-fit: contain; }
.btn--icon .ic, .hud .tools .tool .ic, .topbar .tab > .ic { filter: grayscale(1); transition: filter .16s ease; }
.btn--icon:hover:not(:disabled) .ic, .btn--icon:focus-visible .ic,
.hud .tools .tool:hover .ic, .hud .tools .tool:focus-visible .ic,
.topbar .tab:hover > .ic, .topbar .tab:focus-visible > .ic { filter: grayscale(0) drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.btn--icon:disabled .ic { filter: grayscale(1); opacity: .6; }
.weight-line { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.weight-line em { font-style: normal; }
.ic.ic--weight { width: 18px; height: 18px; flex: 0 0 18px; vertical-align: -4px; object-fit: contain; }

.ui-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease, filter .16s ease;
    box-shadow: inset 0 1px rgba(255,255,255,.12), inset 0 -2px rgba(0,0,0,.3), 0 2px 5px rgba(0,0,0,.3);
}
.ui-button::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 0 36%, rgba(190,244,238,.09) 45%, transparent 54%), linear-gradient(180deg, rgba(255,255,255,.06), transparent 45%, rgba(0,0,0,.1));
    background-size: 240% 100%, 100% 100%;
    background-position: 140% 0, 0 0;
    transition: background-position .65s ease;
}
.ui-button:hover:not(:disabled) { border-color: #d0aa58; color: #fff2c8; filter: brightness(1.06); box-shadow: inset 0 1px rgba(255,244,207,.16), inset 0 -2px rgba(0,0,0,.3), 0 0 0 1px rgba(196,161,90,.24), 0 3px 8px rgba(0,0,0,.35); }
.ui-button:hover:not(:disabled)::after { background-position: -40% 0, 0 0; }
.ui-button:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0,0,0,.5); }
.ui-button:focus-visible { outline: 2px solid #d0aa58; outline-offset: 2px; }
.ui-button:disabled { box-shadow: inset 0 1px rgba(255,255,255,.04); }

.ui-tooltip {
    position: fixed;
    z-index: 1000;
    max-width: min(300px, calc(100vw - 16px));
    padding: 7px 9px;
    border: 1px solid #5b9895;
    background: rgba(8, 16, 16, .96);
    color: #e9eee5;
    box-shadow: 0 8px 22px rgba(0,0,0,.65), inset 0 1px rgba(180,240,235,.12);
    font: 11px/1.35 "Trebuchet MS", sans-serif;
    pointer-events: none;
    animation: tooltip-in .12s ease-out;
}
.ui-tooltip[hidden] { display: none; }
.item-tooltip { display: grid; gap: 3px; min-width: 150px; }
.item-tooltip > b { margin-bottom: 2px; color: #fff4cf; font-size: 12px; }
.item-tooltip > span { display: block; color: #c9d2ca; }
.item-tooltip > span.bad { color: #ff766b; }
.item-tooltip__broken, .item-details__broken { color: #ff766b; }
.cond { font-weight: 600; }
.cond--fine { color: #8ad98a; }
.cond--good { color: #cfd98a; }
.cond--worn { color: #e8c268; }
.cond--bad { color: #e89a52; }
.cond--critical { color: #e8664a; }
.cond--broken { color: #ff766b; }
.ui-tooltip::before, .ui-tooltip::after { content: ""; position: absolute; left: var(--tooltip-arrow-x); transform: translateX(-50%); border: 6px solid transparent; }
.ui-tooltip--below::before { bottom: 100%; border-bottom-color: #5b9895; }
.ui-tooltip--below::after { bottom: calc(100% - 1px); border-bottom-color: rgba(8, 16, 16, .96); }
.ui-tooltip--above::before { top: 100%; border-top-color: #5b9895; }
.ui-tooltip--above::after { top: calc(100% - 1px); border-top-color: rgba(8, 16, 16, .96); }
@keyframes tooltip-in { from { opacity: 0; transform: translateY(3px); } }

input, select, textarea {
    width: 100%;
    background: #100c09;
    color: var(--ink);
    border: 1px solid #5a4a30;
    padding: 7px 8px;
    font: inherit;
    min-height: 34px;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}
textarea { min-height: 54px; resize: vertical; }

.form { display: grid; gap: 8px; }
.field { display: grid; gap: 3px; color: var(--muted); font-size: 12px; }

.grid { width: 100%; border-collapse: collapse; font-size: 12px; }
.grid th, .grid td { border: 1px solid var(--line); padding: 5px 7px; text-align: left; }
.grid tr.on td { background: #241f16; }

.head { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; color: var(--accent); letter-spacing: 0.08em; }

.meter { position: relative; height: 20px; background: #080706; border: 1px solid #625943; overflow: hidden; box-shadow: inset 0 2px 4px #000, 0 1px 0 rgba(255,255,255,.08); }
.meter--wide { margin: 4px 0; }
.meter--thin { height: 18px; }
.meter span {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0 3px;
    overflow: hidden;
    font: 700 11px/18px Consolas, "Courier New", monospace;
    white-space: nowrap;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.meter--thin span { font-size: 10px; line-height: 16px; }
.meter i { position: absolute; inset: 0 auto 0 0; width: var(--p); transition: width 0.35s cubic-bezier(.2,.8,.2,1); }
.meter i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.2), transparent 42%, rgba(0,0,0,.3)); }
.meter__hp { z-index: 1; background: linear-gradient(90deg, #6d1116, var(--hp)); }
.meter__delta { z-index: 0; background: #d3a52b; transition-duration: 0.65s; }
.meter__delta--heal { background: #398bd1; }
.meter__ap { background: linear-gradient(90deg, #285e83, var(--ap)); }
.meter__exp { background: var(--exp); }
.meter__mass { background: linear-gradient(90deg, #3d6b58, #62a17c); }
.meter--mass { height: 24px; container-type: inline-size; }
.meter--mass span { line-height: 22px; -webkit-text-stroke: 1.5px rgba(0, 0, 0, .9); paint-order: stroke fill; }
/* Загруз: цвет кончика зависит от заполнения — стопы градиента привязаны к ширине всей шкалы (cqw), а не заливки. */
.meter--mass .meter__mass {
    background: linear-gradient(90deg, #3f7a4a 0, #6fae5a 40cqw, #c9b23a 62cqw, #cf7f2e 80cqw, #c0392b 100cqw);
}
.meter--over { border-color: #9a493e; color: #ffd0c8; }
.meter--over .meter__mass { width: 100%; background: linear-gradient(90deg, #762820, #b94a3e); }

.face {
    width: 44px;
    height: 44px;
    flex: none;
    background: #2a241c center/cover no-repeat;
    border: 1px solid #5a4a30;
}
.face--male { background-position: 0 0; background-size: 200% 200%; }
.face--female { background-position: 100% 0; background-size: 200% 200%; }
.profile-editor { display: grid; gap: 10px; min-width: 0; }
.profile-editor input[type="file"] { width: 100%; min-width: 0; }
.profile-avatars { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; position: relative; }
.profile-avatars label { display: flex; gap: 4px; align-items: center; cursor: pointer; }
.profile-avatars .face { display: block; object-fit: cover; }
.profile-avatars label { position: relative; }
.profile-avatars label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.profile-avatars label:has(input:checked) .face { outline: 2px solid var(--accent, #ddae45); outline-offset: 2px; }
.profile-avatars label:focus-within .face { outline: 2px solid white; outline-offset: 2px; }
.profile-avatar-tools { display: grid; gap: 6px; }
.profile-avatar-tools .btn { width: 34px; height: 34px; padding: 6px; }
.profile-avatar-spinner { width: 24px; height: 24px; border: 3px solid #686868; border-top-color: #f2ca60; border-radius: 50%; animation: avatar-spin .7s linear infinite; }
@keyframes avatar-spin { to { transform: rotate(360deg); } }
.sheet-tabs .sheet-tab { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 3px; justify-content: center; }
.sheet-tabs .sheet-tab .ic { width: 32px; height: 32px; }
.character-settings { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; height: 100%; overflow: hidden; border: 1px solid var(--line); }
.character-settings__tabs { display: flex; min-width: 0; }
.character-settings .character-settings__tabs .tab { flex: 1; min-width: 0; padding: 7px 4px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: #15110d; color: var(--muted); box-shadow: none; transform: none; }
.character-settings__tabs .tab::after { display: none; }
.character-settings .character-settings__tabs .tab:last-child { border-right: 0; }
.character-settings__tabs .tab:hover { color: var(--ink); }
.character-settings__tabs .tab.tab--on { border-bottom-color: transparent; background: transparent; color: var(--accent); box-shadow: none; }
.character-settings__panel { min-width: 0; min-height: 0; padding: 12px 8px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.auto-collect { display: grid; gap: 8px; }
.auto-collect__hint { margin: 0; color: var(--muted); }
.auto-collect__table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.auto-collect__table th, .auto-collect__table td { padding: 6px 3px; border-bottom: 1px solid var(--line); text-align: left; overflow-wrap: anywhere; }
.auto-collect__table tbody th { font-weight: normal; }
.auto-collect__destination { width: 44px; }
.auto-collect__table th:nth-child(3) { border-left: 1px solid var(--line); padding-left: 6px; }
.auto-collect__category { display: flex; align-items: center; gap: 4px; }
.auto-collect__category > span:last-child { min-width: 0; }
.auto-collect__icon { display: flex; flex: 0 0 16px; color: var(--muted); }
.auto-collect__icon .ic { width: 16px; height: 16px; }
.auto-collect__table select { width: 100%; min-width: 0; padding: 4px 2px; text-align: center; text-align-last: center; }
.profile-description { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }

.tag {
    font-size: 11px;
    padding: 1px 6px;
    border: 1px solid var(--line);
    color: var(--muted);
}
.tag--worn { color: #7aaa7a; border-color: #3a5a3a; }

#toast {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px 10px 18px;
    max-width: min(620px, calc(100% - 24px));
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    font: 16px/1.3 "Russo One", Impact, sans-serif;
    text-align: center;
    -webkit-text-stroke: 1px rgba(0, 0, 0, .85);
    paint-order: stroke fill;
    text-shadow: 0 2px 4px #000;
    cursor: pointer;
    animation: toast-in .22s cubic-bezier(.2, .9, .3, 1.2);
}
#toast.toast--out { animation: toast-out .14s ease-in forwards; }
@keyframes toast-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
}
@keyframes toast-out {
    to { opacity: 0; transform: translate(-50%, -50%) scale(.85); }
}
/* Обычная игровая кнопка, но жирный текст с обводкой в стиле самого сообщения. */
#toast .toast__ok {
    flex: none;
    font-weight: 700;
    -webkit-text-stroke: 1px rgba(0, 0, 0, .85);
    paint-order: stroke fill;
    text-shadow: 0 2px 4px #000;
}
#toast[hidden] { display: none; }
.toast--bad { background: rgba(58, 24, 20, .92); border: 1px solid #6a2a20; color: #ffb7a8; }
.toast--good { background: rgba(26, 46, 28, .92); border: 1px solid #2f5a34; color: #cdf0cd; }

/* ---------- вход и выбор персонажа ---------- */

.auth {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: calc(16px + var(--safe-b)) 16px;
    background: radial-gradient(ellipse at 50% -10%, #2a2418 0%, transparent 50%), #140f0c;
}

.panel {
    border: 12px solid transparent;
    border-image-source: url("../ui/panel.png");
    border-image-slice: 16 fill;
    border-image-width: 12px;
    border-image-repeat: repeat;
    padding: 12px;
}

.auth__card { width: min(400px, 100%); }
.auth__card--wide { width: min(480px, 100%); }
.auth__mark { margin: 0; letter-spacing: 0.28em; font-size: 11px; color: var(--accent); }
.auth__title, .auth__sub { margin: 8px 0 10px; text-transform: uppercase; }
.auth__lead { color: var(--muted); }
.auth__alt { margin-top: 14px; }

.auth__card--characters { position: relative; }
.auth__card--characters .auth__title { padding-right: 42px; }
.account-options__toggle { position: absolute; top: 4px; right: 4px; width: 38px; height: 38px; min-height: 0; padding: 0; }
.account-options__toggle .ic { width: 24px; height: 24px; }
.confirm-dialog.account-options__dialog { width: min(480px, calc(100vw - 24px)); }
.account-options__dialog .confirm-dialog__head { position: sticky; top: 0; z-index: 1; }
.account-options__body { display: grid; gap: 12px; padding: 14px; }
.account-options .auth__sub { margin: 0 0 4px; font-size: 14px; }
.account-options__addon { display: flex; min-width: 0; }
.account-options__addon input { flex: 1 1 0; min-width: 0; }
.account-options__addon .btn { flex: 0 0 auto; margin-left: -1px; white-space: nowrap; }
.account-options__hint { margin: 0; color: var(--muted); font-size: 12px; }
.account-options__success { margin: 0; color: #8ad98a; font-size: 12px; }
.account-options__error { margin: 0; color: #ffb7a8; font-size: 12px; }
.account-options__password { border-top: 1px solid var(--line); padding-top: 12px; }
.account-options input:disabled { opacity: .55; cursor: not-allowed; }
.password-strength { display: grid; gap: 4px; color: var(--muted); font-size: 12px; --strength-color: var(--muted); }
.password-strength__track { height: 7px; border: 1px solid var(--line); background: #100c09; overflow: hidden; }
.password-strength__track span { display: block; height: 100%; background: var(--strength-color); transition: width .2s ease, background-color .2s ease; }
.password-strength[data-score="1"] { --strength-color: #e8664a; }
.password-strength[data-score="2"] { --strength-color: #e8c268; }
.password-strength[data-score="3"] { --strength-color: #cfd98a; }
.password-strength[data-score="4"] { --strength-color: #8ad98a; }
@media (prefers-reduced-motion: reduce) {
    .password-strength__track span { transition: none; }
}

.char-list { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.char-list li { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.char-list__pick {
    width: 100%;
    text-align: left;
    background: #100c09;
    border: 1px solid #5a4a30;
    color: inherit;
    padding: 8px 10px;
    cursor: pointer;
    display: grid;
}
.char-list__pick span { color: var(--muted); font-size: 12px; }
.char-list__pick:hover { border-color: var(--accent); }
.char-list__delete {
    display: grid;
    place-items: center;
    width: 44px;
    height: 100%;
    min-height: 44px;
    border: 1px solid #70413e;
    background: rgba(70, 28, 25, .4);
    color: #dca29c;
    padding: 0;
    cursor: pointer;
}
.char-list__delete .ic { width: 22px; height: 22px; filter: grayscale(1); transition: filter .16s ease; }
.char-list__delete:hover, .char-list__delete:focus-visible { border-color: #bd625a; color: #fff; }
.char-list__delete:hover .ic, .char-list__delete:focus-visible .ic { filter: grayscale(0) drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }

/* ---------- игровой клиент ---------- */

.client { --hud-w: 190px; --hud-gap: 12px; height: 100dvh; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--bg); }

.stage { position: relative; overflow: visible; touch-action: manipulation; background: #0b0a08; user-select: none; -webkit-user-select: none; }
.stage--departing { animation: place-depart .4s ease-in forwards; pointer-events: none; }
.stage--arriving { animation: place-arrive .42s ease-out both; }
@keyframes place-depart {
    0% { opacity: 1; transform: scale(1); filter: brightness(1); }
    72% { opacity: .35; transform: scale(1.09); filter: brightness(.3); }
    100% { opacity: 0; transform: scale(1.14); filter: brightness(0); }
}
@keyframes place-arrive {
    0% { opacity: 0; transform: scale(1.06); filter: brightness(0); }
    100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
.stage, .stage * { -webkit-user-drag: none; }
.stage [draggable="true"] { -webkit-user-drag: element; }

.map { position: absolute; left: 0; top: 0; width: 1600px; height: 686px; transform-origin: 0 0; will-change: transform; }
.map__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; user-select: none; -webkit-user-drag: none; }
/* Левые развилки штольни — зеркало правых, отдельных картинок для них нет. */
.map__img--flip { transform: scaleX(-1); }
.map__img--previous { position: absolute; inset: 0; pointer-events: none; }

.vignette {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(90deg, #000 0, rgba(0, 0, 0, 0.72) 5%, transparent 18%, transparent 82%, rgba(0, 0, 0, 0.72) 95%, #000 100%),
        radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.36) 100%);
}

.door {
    position: absolute;
    border: 0;
    background: transparent;
    color: transparent;
    cursor: pointer;
    padding: 0;
    box-shadow: none;
}
.door::after { display: none; }
.door span {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translateX(-50%);
    background: rgba(12, 10, 8, 0.94);
    border: 1px solid var(--accent);
    color: #efe6c8;
    padding: 8px 16px;
    white-space: nowrap;
    font: 700 22px/1.1 "PT Sans", sans-serif;
    text-shadow: 0 2px 4px #000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
    pointer-events: none;
}
.door:hover span, .door:focus-visible span { display: block; }
.door:hover, .door:focus-visible, .door--locked:hover, .door--locked:focus-visible {
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
}
.place-links {
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 48px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    width: min(760px, calc(100% - var(--hud-w) - 48px));
    transform: translateX(-50%);
}
.place-links__item {
    padding: 5px 9px;
    border: 1px solid rgba(186, 160, 101, .6);
    background: rgba(12, 11, 8, .78);
    color: #e7ddc4;
    font: 12px/1.2 "PT Sans", sans-serif;
    cursor: pointer;
    backdrop-filter: blur(4px);
}
.place-links__item:hover { border-color: var(--accent); background: rgba(44, 37, 24, .92); }

.stage__top {
    position: absolute;
    z-index: 6;
    left: calc(var(--pad) + var(--safe-l));
    top: var(--pad);
    right: calc(var(--hud-w) + var(--hud-gap) + var(--pad) + var(--safe-r));
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
    pointer-events: none;
}
.stage__top > * { pointer-events: auto; }

.place {
    padding: 3px 8px;
    background: var(--glass);
    border: 1px solid var(--line);
    font: 12px/1.3 Consolas, "Courier New", monospace;
    color: #efe6c8;
}
.turn { color: var(--muted); }
.turn--mine { color: #bfe0bf; border-color: #2f5a34; }
.client--battle .stage__top { justify-content: space-between; right: calc(var(--pad) + var(--safe-r)); }
.battle-flee { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 4px 9px; border: 1px solid #86483e; background: rgba(31, 14, 12, .9); color: #e7afa4; font: inherit; cursor: pointer; }
.battle-flee .ic { width: 17px; height: 17px; }
.battle-flee:hover:not(:disabled) { border-color: var(--danger); color: #ffd0c7; }
.battle-flee:disabled { opacity: .45; cursor: not-allowed; }
.turn-clock { --turn-progress: 360deg; position: absolute; z-index: 8; top: var(--pad); left: 50%; width: 52px; height: 52px; display: grid; place-items: center; transform: translateX(-50%); border-radius: 50%; color: #efe6c8; background: conic-gradient(var(--accent) var(--turn-progress), rgba(20,17,12,.8) 0); filter: drop-shadow(0 3px 7px rgba(0,0,0,.7)); transition: --turn-progress 1s linear; }
.turn-clock::before { content: ''; position: absolute; inset: 4px; border-radius: inherit; background: #14110d; border: 1px solid #5a4a30; }
.turn-clock span { position: relative; font: 16px/1 "Russo One", Impact, sans-serif; }
.turn-clock--danger { color: #ff6b5e; animation: turn-clock-pulse .65s ease-in-out infinite alternate; }
@keyframes turn-clock-pulse { to { filter: drop-shadow(0 0 9px rgba(196,69,58,.85)); } }

.here {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    align-items: center;
    max-width: 100%;
    padding: 3px 8px;
    background: var(--glass);
    border: 1px solid var(--line);
    font-size: 12px;
}
.here__name, .chat__name {
    border: 0;
    background: none;
    color: var(--accent);
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.stage__zoom {
    position: absolute;
    z-index: 6;
    right: calc(var(--pad) + var(--safe-r));
    bottom: var(--pad);
    display: grid;
    gap: 4px;
}

.hud { position: absolute; z-index: 6; top: var(--pad); right: calc(var(--pad) + var(--safe-r)); width: var(--hud-w); display: grid; gap: 4px; }
.hud .tools { width: 100%; min-width: 0; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
.hud .tools .tool { width: calc((100% - 32px) / 5); min-width: 30px; max-width: 40px; }
.hud__card {
    width: 100%;
    display: grid;
    gap: 4px;
    padding: 6px;
    background: var(--glass);
    border: 1px solid #4a4638;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.hud__card:hover { border-color: var(--accent); }
.hud--battle .hud__card { cursor: default; }
.hud__top { display: flex; gap: 8px; align-items: center; }
.hud__meta { display: grid; min-width: 0; flex: 1; }
.hud__meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud__level { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.vip-status { color: #f6cf70; font-weight: 700; white-space: nowrap; margin-left: auto; text-shadow: 0 0 9px #f4bd5277; }
.vip-name, .chat__name.vip-name { color: #f6cf70; }
.genetics { position: relative; isolation: isolate; width: min(100%, 480px); margin: 16px auto; padding: 0 12px 20px; text-align: center; }
.genetics::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--genetics-image) center / contain no-repeat; opacity: .125; pointer-events: none; }
.genetics__form { display: grid; gap: 12px; width: 100%; margin: auto; }
.genetics__row { display: grid; grid-template-columns: minmax(0, 1fr) 32px 44px 32px; gap: 8px; align-items: center; padding: 4px 0; }
.genetics__row .btn { width: 32px; height: 32px; min-width: 0; padding: 0; border-radius: 50%; font-size: 20px; font-weight: 800; line-height: 1; }
.genetics__row b { text-align: center; font-size: 20px; }
.genetics__row--lower .genetics__stat, .genetics__row--lower > b { color: #f07870; }
.genetics__row--higher .genetics__stat, .genetics__row--higher > b { color: #8ad08a; }
.genetics__stat { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 18px; }
.genetics__stat > .ic { width: 28px; height: 28px; flex-shrink: 0; }
.genetics__stat > span { overflow-wrap: anywhere; }
.genetics__summary { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; padding-top: 8px; }
.genetics__price { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; }
.genetics__price > .ic { width: 48px; height: 48px; object-fit: contain; }
.genetics__price strong { font-size: 38px; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }
.genetics__price > span { font-size: 18px; }
.genetics__pay { display: inline-flex; align-items: center; justify-content: center; line-height: 1; justify-self: center; min-height: 56px; gap: 12px; max-width: 100%; white-space: normal; }
.genetics__pay > .ic { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; }
.hud__money {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font: 11px/1.4 Consolas, "Courier New", monospace;
    color: var(--accent);
}

.rotate-device { display: none; }

/* ---------- единый интерфейс зданий ---------- */

.overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: var(--pad);
    pointer-events: none;
}
.modal-stack__back .overlay { filter: brightness(.58); }
.modal-stack__front .overlay { z-index: 9; }
.overlay > * { pointer-events: auto; }
.overlay--panel { z-index: 8; justify-content: center; background: rgba(8, 7, 5, 0.55); }

/* ---------- сценарный диалог ---------- */
.dialogue {
    position: absolute;
    z-index: 20;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(280px, 42vw) minmax(0, 1fr);
    align-items: end;
    overflow: hidden;
    background: rgba(8, 8, 7, .2);
}
.dialogue__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 5, 4, 0) 18%, rgba(5, 5, 4, .3) 54%, rgba(5, 5, 4, .68) 100%);
}
.dialogue__content {
    position: relative;
    z-index: 2;
    grid-column: 2;
    align-self: center;
    width: min(760px, 92%);
    margin: 0 clamp(28px, 7vw, 110px) 6vh 0;
}
.dialogue__speaker {
    margin-bottom: 16px;
    color: var(--accent);
    font: 400 clamp(20px, 2.4vw, 34px)/1.1 "Russo One", sans-serif;
    text-transform: uppercase;
}
.dialogue__text {
    position: relative;
    min-height: 4.4em;
    color: #eee8d8;
    font-size: clamp(18px, 2.2vw, 30px);
    line-height: 1.25;
}
.dialogue__measure { visibility: hidden; pointer-events: none; }
.dialogue__typing { position: absolute; inset: 0; }
.dialogue__actions[hidden] { visibility: hidden; display: block; }
.text-ref { display: inline; padding: 0; border: 0; color: #e1bd72; background: none; font: inherit; text-decoration: underline; text-decoration-color: rgba(225, 189, 114, .4); cursor: pointer; }
.text-ref:hover { color: #ffe09a; text-decoration-color: currentColor; }
.dialogue__portrait {
    position: relative;
    z-index: 1;
    grid-column: 1;
    align-self: end;
    justify-self: center;
    width: min(46vw, 720px);
    height: min(94vh, 1000px);
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(18px 10px 24px rgba(0, 0, 0, .6));
    pointer-events: none;
    animation: dialogue-portrait-in .65s cubic-bezier(.2,.8,.2,1) both;
    transition: opacity .35s ease, filter .35s ease, transform .35s ease;
}
.dialogue--player .dialogue__portrait { opacity: .48; filter: saturate(.72) brightness(.72) drop-shadow(18px 10px 24px rgba(0, 0, 0, .6)); transform: translateX(-2%); }
.dialogue--npc .dialogue__portrait { opacity: 1; }
.dialogue__content { animation: dialogue-content-in .3s ease-out both; }
.dialogue__blink { display: none; }
.dialogue--intro { backdrop-filter: blur(20px) brightness(.25); animation: awakening-focus 2.4s ease-out forwards; }
.dialogue--intro .dialogue__portrait { animation: awakening-lyra 2.2s 1.25s cubic-bezier(.2,.8,.2,1) both; }
.dialogue--intro .dialogue__content { animation-delay: 2.25s; }
.dialogue--intro .dialogue__blink { display: block; position: absolute; z-index: 4; inset: 0; pointer-events: none; animation: awakening-blinks 2.2s ease-in-out both; }
@keyframes dialogue-portrait-in { from { opacity: 0; transform: translateX(-18%); } }
@keyframes dialogue-content-in { from { opacity: 0; transform: translateX(18px); } }
@keyframes awakening-focus {
    0% { backdrop-filter: blur(24px) brightness(.08); background: rgba(0,0,0,.9); }
    35% { backdrop-filter: blur(18px) brightness(.3); }
    55% { backdrop-filter: blur(11px) brightness(.58); }
    100% { backdrop-filter: blur(0) brightness(1); background: rgba(8,8,7,.2); }
}
@keyframes awakening-lyra { from { opacity: 0; transform: translateX(-28%); filter: blur(12px) brightness(.4); } }
@keyframes awakening-blinks {
    0%, 16%, 34%, 53%, 72%, 100% { background: transparent; }
    9%, 27%, 45%, 64% { background: #000; }
}
.dialogue__next,
.dialogue__choice {
    border: 1px solid #806d45;
    color: var(--ink);
    background: rgba(28, 25, 19, .92);
    font: 700 18px/1.25 "PT Sans", sans-serif;
    cursor: pointer;
}
.dialogue__next { margin-top: 28px; padding: 12px 28px; }
.dialogue__choices { display: grid; gap: 9px; margin-top: 24px; max-width: 680px; max-height: min(34vh, 300px); overflow-y: auto; padding-right: 6px; }
.dialogue__choice { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; padding: 13px 16px; text-align: left; }
.dialogue__actions:not([hidden]) .dialogue__choice {
    animation: dialogue-choice-in .32s cubic-bezier(.2,.8,.2,1) both;
    animation-delay: calc(var(--choice-index, 0) * .08s);
}
@keyframes dialogue-choice-in { from { opacity: 0; transform: translateY(14px); } }
.dialogue__choice > span:first-child { color: var(--accent); font-family: "Russo One", sans-serif; }
.dialogue__next:hover,
.dialogue__choice:hover { border-color: var(--accent); background: rgba(63, 53, 34, .96); }
.npc-intro { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 18px; align-items: start; }
.npc-intro__portrait { width: 150px; height: 190px; object-fit: cover; object-position: center top; border: 1px solid var(--line); }

@media (max-height: 620px) and (orientation: landscape) {
    .dialogue { grid-template-columns: minmax(220px, 34vw) minmax(0, 1fr); }
    .dialogue__content { margin: 0 5vw 4vh 0; }
    .dialogue__speaker { margin-bottom: 8px; font-size: 20px; }
    .dialogue__text { min-height: 3.5em; font-size: clamp(16px, 2.4vw, 23px); }
    .dialogue__choices { gap: 5px; margin-top: 12px; }
    .dialogue__choice { padding: 8px 12px; font-size: 15px; }
    .dialogue__next { margin-top: 14px; padding: 8px 20px; }
    .dialogue__portrait { width: min(38vw, 520px); height: 96vh; }
}
.overlay--building {
    padding-right: calc(var(--hud-w) + var(--hud-gap) + var(--pad) + var(--safe-r));
    padding-bottom: 10px;
}

.building {
    width: min(960px, 100%);
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.building > * { pointer-events: auto; }
.building__bare { flex: 1; min-height: 0; display: grid; place-items: center; }
/* Регистрация даёт плавную анимацию конического прогресса между тиками. */
@property --healing-progress { syntax: '<angle>'; initial-value: 0deg; inherits: true; }
.hospital-healing { display: grid; justify-items: center; gap: 12px; transition: --healing-progress 1s linear; }
.trade-layout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.trade-column { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.trade-column h3 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.trade-column + .trade-column { border-left: 1px solid var(--line); padding-left: 16px; }
.trade-column .bagdrop { min-height: 120px; max-height: 45vh; }
.trade-money { font-size: 24px; overflow-wrap: anywhere; }
.trade-money-form { display: flex; flex-wrap: wrap; gap: 6px; }
.trade-actions { margin-top: 16px; }
.battle-hand-item, .battle-tracer, .battle-beam { position: fixed; pointer-events: none; z-index: 80; }
.battle-hand-item { width: 128px; height: 128px; }
.battle-hand-item--held { position: absolute; z-index: 2; }
.battle-hand-item img, .battle-hand-item svg { width: 100%; height: 100%; object-fit: contain; }
.battle-hand-item--held { width: max-content; height: 42px; }
.battle-hand-item--held img, .battle-hand-item--held svg { display: block; width: auto; height: 42px; max-width: none; max-height: 42px; }
.battle-tracer { width: 28px; height: 2px; background: #ffe485; box-shadow: 0 0 5px #ffc045; transform-origin: left center; }
.battle-explosion { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; border-radius: 50%; pointer-events: none; z-index: 5; transform: translate(-50%, -50%); background: radial-gradient(circle, #fffbd0 0 12%, #ffc338 25%, #f45e19 44%, #af261dcc 58%, transparent 72%); box-shadow: 0 0 28px #ffb52b; }
.battle-beam { height: 3px; background: #fff2f0; box-shadow: 0 0 4px #ff4038, 0 0 10px #ff4038; transform-origin: left center; }
@media (max-width: 700px) {
    .trade-layout { grid-template-columns: minmax(0, 1fr); }
    .trade-column + .trade-column { border-left: 0; border-top: 1px solid var(--line); padding: 12px 0 0; }
    .trade-column .bagdrop { max-height: 25vh; }
}
.hospital-healing > strong,
.hospital-healing > b { color: #fff; font: 22px/1.1 "Russo One", Impact, sans-serif; -webkit-text-stroke: 2px #111; paint-order: stroke fill; text-shadow: 0 3px 5px #000; }
.hospital-healing > strong { font-size: 28px; }
.hospital-healing__clock,
.craft-queue .craft-job__progress {
    background:
        radial-gradient(circle closest-side, #14110d 0 calc(100% - 9px), transparent calc(100% - 8px)),
        conic-gradient(var(--progress-color, var(--danger)) var(--healing-progress), rgba(20,17,12,.82) 0);
}
.hospital-healing__clock {
    position: relative;
    width: 132px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font: 34px/1 "Russo One", Impact, sans-serif;
    -webkit-text-stroke: 2px #111;
    paint-order: stroke fill;
    text-shadow: 0 3px 5px #000;
    filter: drop-shadow(0 7px 18px rgba(0,0,0,.72));
}
.hospital-healing__clock > span { max-width: 100px; font-size: 20px; line-height: 1.2; text-align: center; }
/* Деления циферблата: 12 рисок по ободу поверх конического прогресса. */
.hospital-healing__ticks,
.craft-job__ticks {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(from -1.5deg, rgba(0, 0, 0, .78) 0 3deg, transparent 3deg 30deg);
    -webkit-mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 9px), #000 calc(100% - 8px));
    mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 9px), #000 calc(100% - 8px));
    pointer-events: none;
}
.roster__trade { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; align-items: center; }
.sheet__guest-actions { margin-top: 10px; }

.topbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.tab {
    border: 1px solid #5a5340;
    background: var(--metal);
    color: var(--ink);
    padding: 6px 16px;
    font: inherit;
    cursor: pointer;
    min-height: 32px;
}
.tab:hover { border-color: var(--accent); }
.tab--on { border-color: var(--accent); color: var(--accent); }
.topbar .tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.topbar .tab > .ic { width: 28px; height: 28px; flex: 0 0 28px; }
.tab--exit { order: 999; }
.topbar--configured .tab--exit { order: 0; }
.tab--exit-alert { outline: 4px solid transparent; outline-offset: 3px; animation: exit-alert .7s ease-in-out 5; }
@keyframes exit-alert { 40%, 65% { outline-color: #ff3030; box-shadow: 0 0 8px #ff3030, 0 0 24px #ff3030c0; } }
@media (prefers-reduced-motion: reduce) { .tab--exit-alert { animation: none; outline-color: #ff4545; } }

.sheetbox {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--glass);
    border: 1px solid #5a5340;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
.overlay--building .sheetbox { flex: 1 1 auto; min-height: 0; max-height: none; }
.overlay.overlay--building-window { padding-top: var(--building-window-top, 80px); }
.overlay--building-window > .sheetbox { width: min(960px, 100%); }
.sheetbox--wide { width: min(1100px, 100%); }
.sheetbox__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--metal);
    border-bottom: 1px solid #2a281e;
    flex: none;
}
.sheetbox__x {
    width: 26px;
    height: 26px;
    border: 1px solid #5a4a30;
    background: #2a2418;
    color: var(--ink);
    cursor: pointer;
    line-height: 1;
    display: grid;
    place-items: center;
    padding: 0;
    box-shadow: inset 0 1px rgba(255,255,255,.12), inset 0 -2px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.45);
}
.sheetbox__x .ic { width: 15px; height: 15px; stroke-width: 2.5; filter: drop-shadow(0 1px 0 #000); }
.sheetbox__x:hover { border-color: var(--danger); color: #ffd0c7; background: #4a1d18; }
.sheetbox__body { padding: 10px; overflow-y: auto; overflow-x: hidden; }
.sheetbox--wide .sheetbox__body { min-height: 0; overflow: hidden; }
.sheetbox__body > p:first-child { margin-top: 0; }

.sheetbox__body:has(> .encyclopedia) { flex: 1; min-height: 0; }
.encyclopedia { display: grid; grid-template-columns: minmax(140px, 30%) minmax(0, 1fr); gap: 16px; min-height: 0; height: 100%; }
.encyclopedia__index { overflow-y: auto; min-height: 0; border-right: 1px solid var(--line); padding-right: 10px; }
.encyclopedia__choice, .encyclopedia__unknown { display: block; width: 100%; min-height: 36px; padding: 8px; font: inherit; text-align: left; overflow-wrap: anywhere; }
.encyclopedia__choice { border: 0; border-left: 2px solid transparent; color: var(--ink); background: transparent; cursor: pointer; }
.encyclopedia__choice:hover, .encyclopedia__choice.is-active { background: #ffffff09; color: var(--accent); border-left-color: var(--accent); }
.encyclopedia__unknown { color: var(--muted); }
.encyclopedia__pages { min-width: 0; overflow-y: auto; padding-right: 6px; }
.encyclopedia__entry { overflow-wrap: anywhere; }
.encyclopedia__entry h2 { margin: 8px 0; font-size: 20px; }
.encyclopedia__entry h3 { margin: 16px 0 8px; font-size: 15px; }
.encyclopedia__image { display: block; width: 100%; height: 180px; object-fit: contain; }
.encyclopedia__lore { white-space: pre-line; }
.encyclopedia__loot { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 0; list-style: none; }
.encyclopedia__loot li { display: flex; align-items: center; gap: 6px; max-width: 100%; }
.encyclopedia__loot .ic { width: 28px; height: 28px; flex: 0 0 28px; object-fit: contain; }
@media (max-width: 600px) {
    .encyclopedia { grid-template-columns: minmax(0, 1fr); height: auto; }
    .encyclopedia__index { max-height: 144px; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 8px; }
    .encyclopedia__pages { overflow: visible; }
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
    padding-bottom: 2rem;
}
.card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    border: 1px solid var(--line);
    background: #100c09;
    padding: 7px 8px;
    text-align: left;
    color: inherit;
    font: inherit;
}
.card--click { cursor: pointer; }
.card--click:hover { border-color: var(--accent); }
.card--off { opacity: 0.65; }
.card--worn { border-color: #4a5a3a; }
.card__title { font-weight: bold; }
.card__price { color: var(--accent); }
.card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.card__acts { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: auto; padding-top: 4px; }
.card__acts input { width: 84px; }

.item-card {
    position: relative;
    min-height: 112px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #100c09;
    color: inherit;
}
.item-card:focus-within, .item-card:hover { border-color: var(--accent); }
.item-card.card--broken { border-color: #963f38; background: #351817; }
.item-card.card--broken:hover, .item-card.card--broken:focus-within { border-color: #e2685e; background: #421c1a; }
/* Испорченная еда: картинка гаснет, поверх полупрозрачная метка. */
.item-card.card--expired .item-card__image > .ic--item { opacity: .35; filter: grayscale(.55); }
.spoiled-mark { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; opacity: .55; color: #a97b3f; }
.spoiled-mark .ic { width: 55%; height: 55%; max-width: 52px; max-height: 52px; filter: drop-shadow(0 1px 2px #000); }
/* Не хватает требований: вещь видна, но помечена красным. */
.item-card.card--locked { border-color: #7a3a30; background: rgba(74, 29, 24, .28); }
.item-card.card--locked .item-card__title { color: #e0a49a; }
.item-stats tr.req--bad th, .item-stats tr.req--bad td, .item-stats tr.req--bad .item-stats__value { color: var(--danger); }
.item-stats tr.req--bad .item-stats__icon { color: var(--danger); }
.item-details__reqs { margin: 4px 0 0; text-transform: uppercase; font-size: 11px; letter-spacing: 0; }
.item-card__open {
    min-width: 0;
    flex: 1;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 8px;
    border: 0;
    background: transparent;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.item-card__open:focus-visible { outline: 1px solid var(--accent); outline-offset: -2px; }
.item-card__image { position: relative; display: grid; place-items: center; min-width: 0; background: #0b0907; }
.item-card__image .ic--item { width: 76px; height: 76px; object-fit: contain; }
.item-card__content { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 8px 0; }
.item-card__title { padding-right: 26px; }
.item-card__actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 0 8px 8px; }
.item-card__qty {
    position: absolute;
    right: 5px;
    bottom: 4px;
    color: #fff4c7;
    font-size: 17px;
    line-height: 1;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
/* Карточки-товары витрин зданий: только в сетке .cards, чтобы не задевать рюкзак и ячейку банка. */
.workshop-items .cards .item-card__open {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(112px, auto) auto;
    gap: 0;
}
.workshop-items .cards .item-card__image { width: 100%; min-height: 112px; }
.workshop-items .cards .item-card__image .ic--item { width: min(100%, 160px); height: 112px; }
.workshop-items .cards .item-card__content { padding: 8px; }
/* Карточка-товар: большая картинка, название и крупная цена или время сборки. */
.item-card.card--goods .item-card__open { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(112px, auto) auto; gap: 0; }
.item-card.card--goods .item-card__image { width: 100%; min-height: 112px; }
.item-card.card--goods .item-card__image .ic--item { width: min(100%, 160px); height: 112px; }
.item-card.card--goods .item-card__content { padding: 8px; text-align: center; align-items: center; }
.item-card.card--goods .item-card__title { padding-right: 0; }
.item-card.card--repair .item-card__title { display: block; padding-right: 0; font-size: 16px; text-align: center; }
.repair-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 12px; margin: 5px 0; }
.repair-meta b { color: var(--accent); font-size: 16px; }
.item-card.card--goods .item-card__actions { justify-content: center; padding-bottom: 10px; }
.item-card.card--goods .item-card__actions .btn { min-width: 60%; }
.card__price--big { font-size: 17px; font-family: "Russo One", Impact, sans-serif; }
.overlay--building .sheetbox__body:has(.workshop-items) { flex: 1; min-height: 0; overflow: hidden; }
.workshop-items, .workshop-production { height: 100%; min-height: 0; }
.workshop-production { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 10px; }
.craft-queue {
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 7px;
    overflow-x: hidden;
    border: 1px solid var(--line);
    background: #0b0907;
}
.craft-queue__empty { margin: auto 0; text-align: center; }
/* Содержимое вкладки рядом с очередью: шапка фиксирована, список прокручивается. */
.craft-tab { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.craft-tab > .head:first-child { margin-top: 0; }
.cardlist { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cardlist__scroll { flex: 1; min-height: 0; overflow-y: auto; padding-right: 8px; }
.virtual-scroll { overflow-anchor: none; scrollbar-gutter: stable; }
.virtual-cards { --card-width: 210px; --card-gap: 8px; position: relative; width: 100%; min-height: 100%; }
.virtual-cards > .virtual-cards__row { position: absolute; top: 0; left: 0; width: 100%; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); gap: var(--card-gap); padding-bottom: 0; }
.virtual-cards__cell { min-width: 0; display: flex; flex-direction: column; }
.virtual-cards__cell > .item-card { flex: 1; }
.virtual-cards .item-card.card--goods .craft-order .quantity-control button[type="button"].quantity-control__addon { flex: 0 0 auto; width: auto; min-width: 60px; padding: 4px 10px; }
.craft-job { position: relative; flex: none; width: min(110px, 100%); aspect-ratio: 1; }
.craft-job__progress {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--accent) var(--progress), #2a2418 0);
}
.craft-job__progress::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #100c09; }
.craft-job__item { position: absolute; inset: 13px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; }
.craft-job__item .ic { width: 100%; height: 100%; object-fit: contain; opacity: .72; }
.craft-job__time {
    position: relative;
    z-index: 1;
    min-width: 48px;
    max-width: calc(100% - 12px);
    padding: 3px 5px;
    border: 1px solid rgba(215, 176, 92, .55);
    background: rgba(11, 9, 7, .86);
    color: #fff4c7;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
}
.craft-queue .craft-job__progress { --progress-color: #ed9238; transition: --healing-progress 1s linear; }
.craft-queue .craft-job__progress::before { content: none; }
.craft-queue .craft-job__time {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    max-width: none;
    padding: 0;
    border: 0;
    background: none;
}
.craft-queue .craft-job__time,
.recipe-time {
    color: #fff;
    font: 16px/1.3 "Russo One", Impact, sans-serif;
    text-align: center;
    -webkit-text-stroke: 2px #111;
    paint-order: stroke fill;
    text-shadow: 0 2px 3px #000;
}
.recipe-time { margin-top: auto; padding-top: 4px; }
.card--recipe > .item-card__open { flex: 0 0 auto; }
.card--recipe > .item-card__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 0 8px 8px; }
.recipe-materials { --recipe-material-size: 48px; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.recipe-material { position: relative; flex: 0 0 var(--recipe-material-size); width: var(--recipe-material-size); height: var(--recipe-material-size); padding: 0; overflow: hidden; border: 2px solid; background: #15120e; color: #fff; cursor: pointer; }
.recipe-material--enough { border-color: #6b956c; }
.recipe-material--missing { border-color: #c4453a; }
.recipe-material > .ic { display: block; width: 100%; height: 100%; object-fit: cover; }
.recipe-material__quantity { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1px 0; background: #000b; color: #fff; font: 700 11px/1.2 "PT Sans", sans-serif; text-align: center; overflow-wrap: anywhere; }
.recipe-material:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.recipe-output { position: absolute; top: 6px; right: 6px; max-width: calc(100% - 12px); min-height: 28px; display: grid; place-items: center; padding: 5px 10px; border: 1px solid #947247; border-radius: 999px; background: #382b1b; color: #ffe1a3; font: 700 14px/1.2 "PT Sans", sans-serif; box-shadow: 0 2px 5px #0008; }
@media (prefers-reduced-motion: reduce) {
    .craft-queue .craft-job__progress { transition: none; }
}
.craft-job__take { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; }
.craft-job__take:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.craft-job__ready { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, .65); }
.craft-job__ready .ic { width: 28px; height: 28px; }
.craft-job__take:hover .craft-job__ready { background: rgba(0, 0, 0, .85); color: var(--accent); }
.craft-job__cancel { position: absolute; z-index: 2; right: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: #e7afa4; cursor: pointer; }
.craft-job__cancel .ic { display: block; width: 22px; height: 22px; margin: 0; transition: filter .15s ease; }
.craft-job__cancel:hover .ic, .craft-job__cancel:focus-visible .ic { filter: drop-shadow(1px 0 0 #ffe5bf) drop-shadow(-1px 0 0 #ffe5bf) drop-shadow(0 1px 0 #ffe5bf) drop-shadow(0 -1px 0 #ffe5bf); }
.craft-job__qty { position: absolute; z-index: 2; left: 6px; top: 6px; padding: 0 5px; border-radius: 9px; background: rgba(10, 8, 6, .9); border: 1px solid var(--accent); color: var(--accent); font: 11px/16px "Trebuchet MS", sans-serif; font-style: normal; }
.craft-queue__all { flex: none; width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px; text-align: center; }
.craft-queue__all > .ic { width: 28px; height: 28px; flex: 0 0 28px; }
.craft-order { display: flex; flex-wrap: wrap; gap: 4px; align-items: stretch; }
.craft-order .btn { flex: 1; min-height: 30px; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.rowform { display: grid; grid-template-columns: minmax(0, 1fr) 90px 100px auto; gap: 6px; align-items: center; }

/* Арена: набор состава по сторонам до начала боя. */
.arena-new { grid-template-columns: 150px 150px auto; align-items: end; margin-bottom: 8px; }
.arena-room { display: grid; gap: 5px; }
.arena-room--mine { border-color: var(--accent); }
.arena-room__side { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.arena-room__side > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.needs { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 2px; font-size: 12px; }
.jobline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.sell-confirm { min-width: min(360px, 80vw); }
.sell-confirm__total { color: var(--accent); font-size: 15px; }
.sell-confirm--listing .sell-confirm__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.sell-confirm--listing .field { min-width: 0; }
.sell-confirm--listing .quantity-control { width: 100%; }
.sell-confirm--listing .sell-confirm__total { font-size: 22px; text-align: center; }
.sell-confirm--listing .actions { justify-content: center; }
.sell-confirm .actions { justify-content: center; }
/* Окно покупки: предмет крупно по центру без рамки, итоги краснеют при превышении кредитов или грузоподъёмности. */
.sell-confirm--buy { display: grid; justify-items: center; gap: 12px; text-align: center; }
.sell-confirm--buy .item-card { width: 100%; min-height: 0; align-items: center; border-color: transparent; background: transparent; }
.sell-confirm--buy .item-card__image { width: 100%; background: transparent; }
.sell-confirm--buy .item-card__image .ic--item { width: 160px; height: 160px; }
.sell-confirm--buy .item-card__content { align-items: center; padding: 4px 0 0; }
.sell-confirm--buy .item-card__title { padding-right: 0; font-size: 22px; }
.sell-confirm--buy .sell-confirm__fields, .sell-confirm--buy .field { display: grid; justify-items: center; }
.sell-confirm--buy .quantity-control { align-self: center; }
.buy-total { margin: 0; font-size: 28px; font-weight: 700; color: var(--accent); }
.buy-mass { margin: 0; font-size: 15px; color: var(--muted); }
.buy-total.is-over, .buy-mass.is-over { color: var(--danger); }

/* Аукцион: слева свои лоты и зона перетаскивания, справа рюкзак по вкладкам. */
.auction-sell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.auction-sell.ground-loot { height: min(560px, 65dvh); }
.ground-loot [data-drop="ground-take"].is-over, .ground-loot [data-drop="ground-drop"].is-over { background: rgba(48, 180, 92, .16); }
@media (max-width: 600px) {
    .ground-loot { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
}
.auction-sell__col { min-width: 0; display: grid; gap: 6px; align-content: start; }
/* Витрины со списками тянутся на всю высоту окна, списки прокручиваются внутри. */
.overlay--building .sheetbox__body:has(> .cardlist),
.overlay--building .sheetbox__body:has(> .auction-sell--fill) { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.overlay--building .sheetbox__body > .cardlist,
.overlay--building .sheetbox__body > .auction-sell--fill { flex: 1; min-height: 0; }
.auction-sell--fill { height: 100%; min-height: 0; align-items: stretch; }
.auction-sell--fill > .auction-sell__col:has(> .dropzone) { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; min-height: 0; }
.craft-tab > .auction-sell--fill { flex: 1; }
.auction-sell--fill .auction-sell__col--list { display: flex; flex-direction: column; min-height: 0; gap: 6px; }
.auction-sell--fill .auction-sell__drop:has(.cardlist) { display: flex; flex-direction: column; min-height: 140px; overflow: hidden; }
.auction-sell--fill .auction-sell__drop .cardlist { flex: 1; min-height: 0; }

/* Банк: ячейка слева с массой и деньгами внизу, справа обычный рюкзак игрока. */
.bank__cell { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px dashed #33301f; padding: 6px; }
.bank__cell.is-over { border-color: var(--accent); background: rgba(36, 31, 22, .5); }
.bank__scroll { flex: 1; min-height: 0; overflow-y: auto; }
.bank__meter { display: flex; gap: 8px; align-items: center; }
.bank__meter .meter { flex: 1; }
.bank__money { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bank__bag.is-over { outline: 1px solid var(--accent); outline-offset: 2px; }

/* Рюкзак игрока внутри здания: та же колонка, что в листе персонажа.
   Двойной класс перебивает сетку .sheet, объявленную ниже по файлу. */
.sheet.sheet--bag-only { display: flex; height: 100%; min-height: 0; width: auto; }
.sheet--bag-only .sheet__col--bag { flex: 1; min-width: 0; display: grid; }

.greenhouse-items { position: relative; display: flex; height: 100%; min-height: 0; overflow: hidden; }
.greenhouse-bed-scroll { display: flex; flex: 1; min-height: 0; overflow: auto; }
.greenhouse-beds { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); width: 100%; max-width: calc(var(--garden-columns) * 112px + 40px); margin: auto; gap: 13.333px 8px; padding: 24px; flex-shrink: 0; }
.garden-bed { position: relative; justify-self: center; width: 104px; height: 104px; padding: 0; border: 1px solid transparent; border-radius: 4px; background-color: transparent; background-size: cover; cursor: pointer; color: var(--ink); }
.garden-bed:hover, .garden-bed:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.garden-bed__level { position: absolute; top: 4px; left: 4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #17251ed9; border: 2px solid #a1ba70; font-size: 12px; line-height: 1; z-index: 2; }
.garden-bed__dial { position: absolute; inset: 10px; box-sizing: border-box; border: 2px solid #000; border-radius: 50%; opacity: .8; pointer-events: none; background: radial-gradient(circle closest-side, transparent calc(100% - 8px), #000 calc(100% - 8px) calc(100% - 6px), transparent calc(100% - 6px)); }
.garden-bed__dial::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#ed9238 var(--garden-progress, 0deg), rgba(20, 17, 12, .82) 0); -webkit-mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 6px), #000 calc(100% - 5px)); }
.garden-bed__dial::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from -1.5deg, rgba(0, 0, 0, .78) 0 3deg, transparent 3deg 30deg); -webkit-mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 6px), #000 calc(100% - 5px)); }
.garden-bed__produce { position: absolute; top: 50%; left: 50%; width: 104px; height: 104px; pointer-events: none; }
.garden-bed__produce .ic { width: 104px; height: 104px; max-width: none; }
.garden-bed__timer { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2; padding: 1px 6px; border-radius: 8px; background: #0b140fb3; font-size: 11px; line-height: 14px; white-space: nowrap; pointer-events: none; }
.garden-bed__ready { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2; }
.garden-bed__ready .ic { width: 32px; height: 32px; }
.garden-bed--buy { display: grid; place-content: center; justify-items: center; gap: 6px; border: 1px dashed #a1ba70; background: #19251d4d; }
.garden-bed--buy::before { content: ''; position: absolute; inset: 0; background: var(--bed-image) center / cover; opacity: .3; pointer-events: none; }
.garden-bed__plus { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border: 3px solid #d9df94; border-radius: 50%; color: #fff0be; font: 40px/1 "Trebuchet MS", sans-serif; text-shadow: 0 0 3px #000; box-shadow: 0 0 0 2px #19281e; }
.garden-bed__price { position: relative; font-size: 12px; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.garden-bed--buy:disabled { cursor: not-allowed; opacity: .55; }
.garden-bed__fertilizers { position: absolute; right: 0; top: 2px; max-width: 80px; display: flex; justify-content: center; }
.garden-bed__fertilizers .ic { width: 16px; height: 16px; }
.greenhouse-upgrade { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; padding-top: 12px; }
.greenhouse-bed-summary { margin: 0; text-align: center; }
.topbar .tab[data-ui="greenhouseTab"] { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; min-height: 44px; }
.greenhouse-catalog { height: 100%; min-height: 0; }
.composter { height: 100%; min-height: 0; overflow: auto; padding: 20px; }
.composter-status { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 0 auto 24px; max-width: 600px; }
.composter-status > .ic { width: 144px; height: 144px; object-fit: contain; flex: 0 0 144px; }
.composter-status__details { display: grid; gap: 10px; min-width: 0; width: 260px; text-align: center; }
.composter-status__details > span { display: flex; align-items: center; justify-content: center; gap: 8px; }
.composter-status__details > span > .ic { width: 28px; height: 28px; object-fit: contain; }
.composter-status__details .btn--icon { width: 100%; font-size: 18px; }
.composter-status meter, .composter-status progress { width: 100%; height: 14px; accent-color: #68a979; }
.composter-layout .composter { width: 100%; flex: 1; }
.composter-layout .composter-status { flex-direction: column; margin: 0; width: 100%; }
.composter-layout .composter-status__details { width: min(100%, 260px); }
@media (max-width: 480px) {
    .composter { padding: 12px; }
    .composter-status { gap: 12px; }
    .composter-status > .ic { width: 88px; height: 88px; flex-basis: 88px; }
}
.greenhouse-catalog .card--recipe .item-card__image { min-height: 168px; }
.greenhouse-catalog .card--recipe .item-card__image > .ic { width: min(100%, 160px); height: 160px; max-width: none; object-fit: contain; }
.greenhouse-bed-options { display: grid; gap: 12px; }
.greenhouse-bed-options .head { margin: 0; }
.greenhouse-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.greenhouse-option { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 4px; background: #171c16; color: var(--ink); font: inherit; text-align: center; cursor: pointer; }
.greenhouse-option:hover, .greenhouse-option:focus-visible { border-color: var(--accent); }
.greenhouse-option > .ic { width: 88px; height: 88px; }
.greenhouse-option > span { overflow-wrap: anywhere; }
.greenhouse-option > b { position: absolute; top: 6px; right: 6px; padding: 1px 4px; background: #111c; }
.greenhouse-bed-status { display: grid; justify-items: center; gap: 10px; }
.greenhouse-bed-status > .ic { width: 104px; height: 104px; }
.auction-sell__drop { min-height: 140px; padding: 8px; border: 1px dashed #5a4a30; }
.auction-sell__drop.is-over { border-color: var(--accent); background: rgba(186, 160, 101, .12); }
.dropzone { display: grid; place-items: center; }
.dropzone__hint { max-width: 14em; color: rgba(231, 221, 196, .25); font: 400 clamp(15px, 2vw, 22px)/1.2 "Russo One", sans-serif; text-align: center; }

/* Фильтры витрины: категории, поиск и порядок делят первую строку; подкатегории и галочка — вторую. */
.filterbar { display: grid; gap: 8px; margin-bottom: 10px; }
.filterbar__main, .filterbar__sub { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.filterbar__main { flex-wrap: wrap; }
.filterbar__main > .filterbar__tabs { flex: 0 1 auto; }
.filterbar__sub > .filterbar__tabs { flex: 1 1 0; }
.filterbar__tabs { min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.filterbar__tabs:empty { display: none; }
.filterbar__tabs .bagtabs { margin-bottom: 0; }
.filterbar__tabs .bagtabs--sub { margin-top: 0; }
.filterbar__sub .filterbar__check { flex: none; align-self: center; margin-left: auto; }
.filterbar__sub .filterbar__checks, .filterbar__main > .filterbar__checks { display: flex; gap: 12px; flex: none; align-self: center; margin-left: auto; }
.filterbar__checks .filterbar__check { margin-left: 0; }
.filterbar__main > .filterbar__check { flex: none; align-self: center; }
.filterbar__main > .sortbar__select { flex: 0 1 128px; min-width: 0; max-width: 128px; margin-left: auto; min-height: 34px; }
.filterbar__search { position: relative; flex: 1 1 120px; min-width: 120px; }
.filterbar__search input { width: 100%; min-width: 0; min-height: 34px; padding-right: 30px; box-sizing: border-box; }
.filterbar__search input:focus, .filterbar__search input:focus-visible { outline: none; box-shadow: none; border-color: var(--accent); }
.filterbar__search input::-webkit-search-cancel-button { display: none; }
.filterbar__clear { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--muted); font: 700 18px/1 inherit; cursor: pointer; }
.filterbar__clear:hover, .filterbar__clear:focus-visible { color: var(--accent); }
.cardlist__lead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.filterbar__check { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; cursor: pointer; }
.filterbar__check input[type="checkbox"] {
    appearance: none;
    display: grid;
    place-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    min-height: 20px;
    margin: 0;
    padding: 0;
    border: 1px solid #8a7957;
    border-radius: 2px;
    background: #15120e;
    color: var(--accent);
    box-shadow: inset 0 1px 3px #0005;
    cursor: pointer;
}
.filterbar__check input[type="checkbox"]::after {
    content: "";
    width: 5px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-1px) rotate(45deg);
    opacity: 0;
}
.filterbar__check input[type="checkbox"]:checked { border-color: var(--accent); background: #292416; }
.filterbar__check input[type="checkbox"]:checked::after { opacity: 1; }
.filterbar__check:hover input[type="checkbox"] { border-color: var(--accent); }
.filterbar__check input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sortbar__select { padding: 4px 6px; min-height: 27px; border: 1px solid #5a4a30; background: #1a1610; color: var(--ink); font: inherit; }
.quantity-control { display: inline-flex; width: fit-content; max-width: 100%; min-width: 0; align-self: start; }
.craft-order, .craft-order .quantity-control { width: 100%; }
.quantity-control > * { border-radius: 0; min-height: 30px; margin: 0; color: var(--ink); text-align: center; font: inherit; line-height: 1; }
.quantity-control input {
    flex: 1 1 auto; min-width: 3ch; max-width: 100%; padding: 4px; background: var(--bg);
    border: solid #6a5a38; border-width: 1px 0; outline: none;
    font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.quantity-control input:focus { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.quantity-control button {
    position: relative; display: grid; place-items: center;
    flex: 0 0 26px; width: 26px; padding: 4px; appearance: none;
    border: 1px solid #6a5a38; background: var(--metal);
    font-size: 16px; font-weight: 700; cursor: pointer; touch-action: none; user-select: none;
    box-shadow: inset 0 1px rgba(255,255,255,.1), inset 0 -1px rgba(0,0,0,.3);
    transition: border-color .15s, background-color .15s;
}
.quantity-control button:hover:not(:disabled) { background: #4a1d18; border-color: var(--accent); }
.quantity-control button:active:not(:disabled) { background: linear-gradient(#292720, #181613); box-shadow: inset 0 1px 3px #100e0b; }
.quantity-control button:focus-visible { outline: 1px solid var(--accent); outline-offset: -3px; }
.quantity-control button .ic { width: 16px; height: 16px; margin: 0; pointer-events: none; }
.quantity-control :disabled { cursor: default; }
.quantity-control input:disabled { opacity: .45; }
.quantity-control button:disabled::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: rgba(0, 0, 0, .5); pointer-events: none;
}
@media (pointer: coarse) {
    .quantity-control > * { min-height: 44px; }
    .quantity-control button { flex-basis: 36px; width: 36px; }
    .quantity-control input { font-size: 16px; }
}
.quantity-control button.quantity-control__addon { flex: 0 0 auto; width: auto; padding: 4px 10px; border-left: 0; font-size: 12px; white-space: nowrap; }
.item-card.card--goods .craft-order .quantity-control button.quantity-control__addon { flex: 0 0 30px; width: 30px; min-width: 30px; padding: 4px; }
.quantity-control--invalid input { color: var(--danger); }
.say { color: #e6dcc0; font-style: italic; margin: 0 0 8px; }
.topic { border: 0; background: none; color: var(--accent); padding: 3px 5px; font: inherit; cursor: pointer; text-align: left; }
.topic:hover, .topic:focus-visible { color: var(--ink); background: #241f16; text-decoration: underline; }
.logbox {
    max-height: 40dvh;
    overflow: auto;
    background: #100c09;
    border: 1px solid var(--line);
    padding: 6px 8px;
    font: 12px/1.4 Consolas, "Courier New", monospace;
}

.who { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }

/* ---------- окно персонажа ---------- */

.sheet {
    display: grid;
    grid-template-columns: minmax(300px, 1.15fr) minmax(190px, 240px) minmax(280px, 1.4fr);
    gap: 10px;
    align-items: stretch;
    height: min(62vh, 560px);
    min-height: 0;
}
.sheet--guest { grid-template-columns: minmax(200px, 1fr) minmax(190px, 240px); height: auto; }
.sheet-profile { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; min-width: 0; min-height: 0; }
.sheet-profile--settings, .sheet-profile--history { grid-template-rows: minmax(0, 1fr); }
.sheet-tabs { display: grid; align-content: start; gap: 4px; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.sheet-tab { min-height: 42px; display: grid; align-content: center; gap: 1px; border: 1px solid #5a4a30; background: #15110d; color: var(--muted); padding: 6px 8px; text-align: left; font: inherit; cursor: pointer; }
.sheet-tab:hover, .sheet-tab--on { border-color: var(--accent); color: var(--ink); background: #241f16; }
.sheet-tab:disabled { cursor: not-allowed; opacity: 0.45; }
.sheet-tab small { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.sheet-profile__body { min-height: 0; overflow: auto; padding-right: 3px; }
.character-statistics { min-width: 0; padding: 0 10px 10px; }
.character-statistics h4 { display: flex; align-items: center; gap: 5px; margin: 14px 0 6px; color: var(--accent); }
.character-statistics h4 .ic { width: 18px; height: 18px; }
.statistics-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 5px; padding-top: 8px; }
.statistics-items__item { position: relative; min-width: 0; height: 62px; padding: 4px 4px 17px; border: 1px solid var(--line); background: #100c09; color: var(--ink); cursor: pointer; }
.statistics-items__item .ic { width: 100%; height: 100%; object-fit: contain; }
.statistics-items__item b { position: absolute; bottom: 2px; left: 2px; right: 2px; text-align: center; font-size: 10px; }
.character-statistics__list { margin: 0; }
.character-statistics__list > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.character-statistics__list dt { overflow-wrap: anywhere; }
.character-statistics__list dd { margin: 0; overflow-wrap: anywhere; text-align: right; font-variant-numeric: tabular-nums; }
.character-statistics__details { margin-top: 12px; }
.character-statistics__details summary { cursor: pointer; color: var(--accent); }
.character-statistics__details small { color: var(--muted); }
.character-history { list-style: none; display: grid; gap: 5px; margin: 0; padding: 0; }
.character-history li { display: grid; gap: 2px; padding: 6px 8px; border: 1px solid var(--line); background: #100c09; }
.character-history time { color: var(--muted); font-size: 10px; }
.character-quests { display: grid; gap: 8px; min-width: 0; padding: 0 8px 8px; }
.character-quests select { width: 100%; min-width: 0; }
.battle-history { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; min-width: 0; min-height: 0; padding: 0 4px; }
.battle-history__filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.battle-history__filters > select { width: 100%; min-width: 0; padding-left: 5px; padding-right: 2px; }
.battle-history__scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.battle-history__list { list-style: none; margin: 0; padding: 0; }
.battle-history__row { display: grid; gap: 2px; min-width: 0; padding: 6px; border-bottom: 1px solid var(--line); border-left: 2px solid var(--battle-result); font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
.battle-history__heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 6px; align-items: baseline; }
.battle-history__heading time { color: var(--muted); font-size: 10px; }
.battle-history__row--win { --battle-result: #8ad08a; }
.battle-history__row--loss { --battle-result: #f07870; }
.battle-history__row--draw { --battle-result: #75c7f0; }
.battle-history__row--fled { --battle-result: #ed9238; }
.battle-history__result { color: var(--battle-result); }
.battle-history__place { color: var(--accent); font-weight: 400; }
.battle-history__meta { display: flex; gap: 6px; align-items: baseline; color: var(--muted); font-size: 10px; }
.battle-history__participants { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.battle-history__rounds { flex: none; }
.battle-history__status { min-height: 1px; text-align: center; }
.battle-history__status p { margin: 10px 0; }
.guest-location { margin: 0 0 10px; color: var(--accent); overflow-wrap: anywhere; }
.sheet--inventory-focus .sheet__col--bag { outline: 1px solid var(--accent); outline-offset: 3px; }
.sheet__col { display: grid; gap: 6px; align-content: start; min-width: 0; min-height: 0; max-height: 100%; padding: 0 4px; }
.sheet__col.sheet-profile__body--settings, .sheet__col.sheet-profile__body--history { grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.sheet__head {
    margin: 0;
    font: bold 12px/1.2 "Trebuchet MS", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}
.sheet__points { margin: 0; color: var(--accent); }

.stats { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; }
.stats__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto 24px;
    gap: 6px;
    align-items: center;
    padding: 3px 6px;
    background: none;
    border: 0;
}
.stats--attributes > .stats__row > .ic { width: 32px; height: 32px; }
.stats--attributes > .stats__row > span { overflow-wrap: anywhere; }
.stats__row--boosted > span, .stats__row--boosted > b { color: #8ad08a; }
.stats-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.stats-layout .food-effects { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; padding: 0; width: 52px; }
.stats-layout .food-effect { display: grid; justify-items: center; gap: 2px; width: 52px; padding: 0; background: none; border: 0; }
.food-effect__dial { position: relative; width: 48px; height: 48px; }
.food-effect__dial::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#8ad08a var(--effect-progress), #ffffff26 0); mask: radial-gradient(transparent 64%, #000 67%); }
.stats-layout .food-effect__image { width: 48px; height: 48px; object-fit: contain; }
.food-effect__time { font-size: 10px; white-space: nowrap; }
.stats__row--skill { grid-template-columns: auto 1fr auto 42px; }
.stats__row--friend { grid-template-columns: 10px minmax(0, 1fr) auto 28px 32px 32px; }
.friend-location, .friend-action { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 32px; padding: 0; }
.friend-action { width: 32px; }
.friend-remove .ic { width: 24px; height: 24px; }
.friend-dot { width: 8px; height: 8px; border-radius: 50%; background: #4a4438; }
.friend-dot--on { background: #6fbf5a; box-shadow: 0 0 6px rgba(111, 191, 90, .7); }
.roster__tabs { display: flex; min-width: 0; overflow-x: auto; }
.roster__tabs .chat__tab { flex: 1; min-width: 0; }
button.roster__place { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer; }
.roster__friend { display: flex; align-items: center; width: 100%; min-width: 0; justify-content: flex-start; gap: 6px; }
.roster__friend .friend-dot { flex: 0 0 8px; }
.roster__friend span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend-name { min-width: 0; overflow: hidden; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.friend-name:hover { color: var(--accent); }
.skillbar { display: block; height: 4px; background: #2a2418; }
.skillbar b { display: block; height: 100%; width: var(--p); background: var(--accent); }
.tag--bad { border-color: #7a3a30; color: #e0a49a; }
.tag--ready { border-color: #4a7a4a; color: #8ad08a; }

.bagtabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.bagtabs__sort { margin-left: auto; flex: 0 0 34px; width: 34px; height: 34px; padding: 3px; }
.bagtabs__sort .ic { width: 28px; height: 28px; }
.craft-collection-flight { position: fixed; width: 48px; height: 48px; object-fit: contain; pointer-events: none; z-index: 10000; }
.bagtabs--sub { margin-top: -4px; }
.bagtab {
    min-width: 30px;
    padding: 4px 8px;
    border: 1px solid #5a4a30;
    background: #1a1610;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}
.bagtab--on { border-color: var(--accent); color: var(--accent); background: #241f16; }
.bagtabs--sub .bagtab { font-size: 11px; padding: 2px 6px; min-width: 0; }
.filterbar__tabs .bagtab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; min-height: 34px; }
.sheet__col--bag { grid-template-rows: auto auto minmax(0, 1fr) auto; min-height: 0; }
.bagdrop { min-height: 0; overflow: auto; padding: 6px; border: 1px dashed #33301f; }
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 74px;
    grid-auto-flow: dense;
    gap: 5px;
}
.inventory-grid .item-card {
    grid-column: span var(--item-w);
    grid-row: span var(--item-h);
    min-height: 0;
    border-color: transparent;
    background: transparent;
}
.inventory-grid .item-card__image { background: transparent; }
.inventory-grid .item-card:hover, .inventory-grid .item-card:focus-within { border-color: transparent; background: transparent; }
.inventory-grid .item-card.card--broken { border-color: #963f38; background: #351817; }
.inventory-grid .item-card.card--locked { border-color: rgba(150, 63, 56, .65); background: rgba(53, 24, 23, .55); }
.inventory-grid .item-card.card--locked:hover, .inventory-grid .item-card.card--locked:focus-within { border-color: rgba(150, 63, 56, .65); background: rgba(53, 24, 23, .55); }
.inventory-grid .item-card.card--locked .ic--item { filter: grayscale(.4) brightness(.85); }
.inventory-grid .item-card__open { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.inventory-grid .item-card__image .ic--item { width: min(80%, 96px); height: min(80%, 96px); }
.inventory-grid .item-card__content { display: none; }
.inventory-grid .item-card__open { grid-template-rows: minmax(0, 1fr); }
.inventory-grid .item-card__content > .dim,
.inventory-grid .card__tags { display: none; }
.card--item { cursor: grab; }
.is-dragging { opacity: 0.38; }
.is-over { border-color: var(--accent); background: #241f16; }
.drag-ghost { position: fixed; z-index: 2000; left: 0; top: 0; min-height: 0; overflow: hidden; margin: 0; border: 1px solid var(--accent); background: #100c09; opacity: .9; pointer-events: none; will-change: transform; }
.drag-ghost.card--item .item-card__open { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.drag-ghost.card--item .item-card__image .ic--item { width: min(80%, 96px); height: min(80%, 96px); }
.drag-ghost.card--item .item-card__content,
.drag-ghost.card--item .card__tags { display: none; }

.doll { position: relative; display: grid; place-items: center; flex: 0 0 320px; height: 320px; min-height: 320px; overflow: hidden; background: #100c09; border: 1px solid var(--line); }
.paperdoll { position: relative; aspect-ratio: 512 / 763; isolation: isolate; flex: none; }
.doll > .paperdoll { width: min(100%, 210px); max-height: 100%; }
.paperdoll__body { display: block; width: 100%; height: 100%; pointer-events: none; }
.paperdoll__armor { position: absolute; display: block; overflow: hidden; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; pointer-events: none; }
.paperdoll__armor > img { position: absolute; display: block; max-width: none; pointer-events: none; }
button.paperdoll__armor { pointer-events: auto; cursor: pointer; }
.paperdoll--interactive > button.paperdoll__armor { cursor: grab; }
button.paperdoll__armor:hover, .paperdoll__armor.is-over { background: transparent; filter: drop-shadow(0 0 3px var(--accent)); }
.paperdoll__armor--broken { opacity: .65; }
.doll.is-over { outline: 1px solid var(--accent); outline-offset: -2px; }
.doll__face { position: absolute; left: 6px; top: 6px; }
.sheet-hotbar { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.sheet-hotbar__empty-message { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; margin: 0; padding: 5px 12px; background: rgba(10, 8, 6, 0.74); color: var(--ink); font-size: 10px; line-height: 1.25; text-align: center; pointer-events: none; }
.sheet-hotbar__slot { position: relative; min-width: 0; height: 52px; display: grid; place-items: center; overflow: hidden; border: 1px solid #5a4a30; background: #1a1610; color: var(--ink); font: 9px/1.1 "Trebuchet MS", sans-serif; cursor: pointer; }
.sheet-hotbar__slot .sheet-hotbar__icon { position: absolute; left: 50%; top: 50%; width: 125%; height: 125%; transform: translate(-50%, -50%); object-fit: contain; }
.sheet-hotbar__slot--on:hover { border-color: var(--accent); }
.sheet-hotbar__qty { position: absolute; z-index: 2; right: 2px; bottom: 2px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 9px; background: rgba(10, 8, 6, .9); border: 1px solid var(--accent); color: var(--accent); font: 10px/14px "Trebuchet MS", sans-serif; font-style: normal; text-align: center; }
.sheet-hotbar__slot--empty { cursor: default; color: var(--muted); }
.sheet__col--doll { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.sheet__col--doll > :not(.doll) { flex-shrink: 0; }
.food-effects { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.food-effect { display: flex; align-items: center; gap: 3px; max-width: 100%; padding: 2px 4px; border: 1px solid var(--line); background: #100c09; cursor: help; }
.food-effect:focus, .food-effect:hover { border-color: var(--accent); }
.food-effect__image { width: 32px; height: 32px; object-fit: contain; flex: 0 0 32px; }
.food-effect__bonuses { display: flex; flex-wrap: wrap; gap: 2px 6px; min-width: 0; }
.food-effect__bonus { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); font-size: 12px; }
.food-effect__bonus > span { display: inline-flex; }
.food-effect__bonus .ic { width: 18px; height: 18px; }
.food-tooltip { max-height: 60vh; overflow-y: auto; }
.slot {
    position: absolute;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    overflow: hidden;
    border: 1px solid #5a4a30;
    background: #1a1610;
    padding: 2px;
    color: var(--muted);
    font: 9px/1.1 "Trebuchet MS", sans-serif;
    text-align: center;
}
.slot > span { display: block; width: 100%; overflow-wrap: anywhere; }
.slot > .ic { width: 100%; height: 100%; object-fit: contain; }
.slot--on { background: #2a3a24; color: var(--ink); cursor: grab; }
.slot--on:hover { background: #3a4a2e; }
.slot--busy { opacity: 0.5; }
.slot--broken { background: #3a241c; border-color: #7a3a30; }
/* Меню по правой кнопке на игроке. */.popmenu {
    position: fixed;
    z-index: 60;
    min-width: 190px;
    display: grid;
    padding: 3px;
    border: 1px solid #6c5934;
    background: #14110c;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .65);
}
.popmenu[hidden] { display: none; }
.popmenu button {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 7px 8px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.popmenu button:hover { background: #241f16; color: var(--accent); }
.popmenu .ic { width: 16px; height: 16px; }

/* Карточка предмета: крупная картинка, название и таблица чисел. */
.item-details { width: min(420px, 82vw); display: grid; gap: 4px; justify-items: center; }
.item-details__art { width: 100%; padding: 1rem; display: grid; place-items: center; border: 1px solid var(--line); background: #0b0907; }
.item-details__art .ic { width: min(100%, 160px); height: min(28vh, 160px); object-fit: contain; }
/* Требования — единая сетка в два столбца. */
.item-reqs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; }
.item-reqs__cell { display: flex; gap: 6px; align-items: center; padding: 3px 6px; border: 1px solid var(--line); background: #100c09; }
.item-reqs__cell b { margin-left: auto; }
.item-reqs__cell.req--bad { color: var(--danger); border-color: #7a3a30; }
.item-details .item-reqs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 6px; }
.item-details__grid .item-reqs__cell { min-width: 0; flex-wrap: wrap; gap: 3px 5px; }
.item-details__grid .item-reqs__cell > .ic { flex: none; width: 16px; height: 16px; color: var(--accent); }
.item-details__grid .item-reqs__cell > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.item-details__grid .item-reqs__cell > b { min-width: 0; max-width: 100%; text-align: right; overflow-wrap: anywhere; }
.item-details__grid .text-ref { overflow-wrap: anywhere; }
.item-details__grid .item-details__ap { flex: none; white-space: nowrap; }
.item-details__title { margin: 0; text-align: center; font: 400 22px/1.15 "Russo One", sans-serif; color: var(--ink); }
.item-details__kind { margin: 0; text-align: center; }
.item-details__note { margin: 0; text-align: center; }
.item-stats { width: 100%; border-collapse: collapse; }
.item-stats tr + tr { border-top: 1px solid var(--line); }
.item-stats th { padding: 5px 6px; color: var(--muted); font-weight: 400; text-align: left; }
.item-stats__icon { width: 26px; padding: 5px 0 5px 4px; color: var(--accent); }
.item-stats__icon .ic { width: 18px; height: 18px; }
.item-stats__value { padding: 5px 6px; color: var(--ink); font-weight: 700; text-align: right; white-space: nowrap; }
.item-details__actions { justify-content: center; }
.bug-report { display: grid; gap: 16px; }
.bug-report p { margin: 0; text-align: center; }
.bug-report textarea { width: 100%; min-height: 140px; }
.bug-report .actions { justify-content: center; }
.bug-report .btn .ic { width: 28px; height: 28px; }
.item-details__actions .btn { min-height: 42px; gap: 8px; }
.item-details__actions .btn .ic { width: 28px; height: 28px; flex: 0 0 28px; }
.ammo-badge {
    position: absolute;
    z-index: 3;
    right: 2px;
    bottom: 2px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 1px solid #6c5934;
    border-radius: 10px;
    background: rgba(10, 8, 6, .92);
    color: #ffd98a;
    font: 700 11px/1.2 "Trebuchet MS", sans-serif;
    font-style: normal;
    letter-spacing: .02em;
    -webkit-text-stroke: .4px #120d08;
    paint-order: stroke fill;
    pointer-events: none;
}
.ammo-badge--empty { color: #ff8d7f; border-color: #86483e; }
.slot--head { left: 50%; top: 8px; transform: translateX(-50%); }
.slot--chest { left: 50%; top: 62px; transform: translateX(-50%); }
.slot--hand_r { left: 8px; top: 92px; }
.slot--hand_l { right: 8px; top: 92px; }
.slot--legs { left: 50%; top: 140px; transform: translateX(-50%); }
.slot--feet { left: 50%; bottom: 10px; transform: translateX(-50%); }
/* Подсветка цели перетаскивания должна перебивать собственные рамки слотов и карточек. */
.slot.is-over, .sheet-hotbar__slot.is-over { border-color: var(--accent); background: #241f16; }
.inventory-grid .item-card.is-over { border-color: transparent; background: transparent; }
.inventory-grid .item-card:is(:hover, :focus-within, .is-over, .is-ammo-target) .item-card__image > .ic--item {
    filter: drop-shadow(1px 0 0 var(--item-outline, #73bcb4)) drop-shadow(-1px 0 0 var(--item-outline, #73bcb4)) drop-shadow(0 1px 0 var(--item-outline, #73bcb4)) drop-shadow(0 -1px 0 var(--item-outline, #73bcb4));
}
.inventory-grid .item-card.is-ammo-target { --item-outline: #59bb79; }

/* ---------- клетки данжа ---------- */

/* Перспективная сетка держит текущую клетку в центре и скрывает дальние края. */
.overlay--dungeon { justify-content: center; gap: 16px; overflow: hidden; }
.topbar--dungeon {
    position: absolute;
    top: var(--pad);
    right: calc(var(--hud-w) + var(--hud-gap) + var(--pad) + var(--safe-r));
    width: auto;
}
.dungeon__box {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 5px 8px;
    background: var(--glass);
    border: 1px solid var(--line);
}
.dungeon__box p { margin: 0; }

.maze-viewport {
    --cell: clamp(52px, 8vmin, 76px);
    --maze-gap: 8px;
    width: min(78vw, 34rem);
    height: min(58vh, 28rem);
    overflow: visible;
    display: grid;
    place-items: center;
    perspective: 420px;
    mask-image: radial-gradient(ellipse 72% 70% at center, #000 55%, transparent 100%);
}
.maze-plane {
    position: relative;
    width: 100%;
    height: 100%;
    transform: rotateX(35deg);
    transform-origin: center bottom;
    transform-style: preserve-3d;
}
.maze__track {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--cell));
    grid-template-rows: repeat(var(--rows), var(--cell));
    gap: var(--maze-gap);
    width: max-content;
    height: max-content;
    transform: translate(var(--offset-x), var(--offset-y));
}
.tile {
    position: relative;
    appearance: none;
    border: 1px solid rgba(238, 232, 213, 0.75);
    border-radius: 2px;
    background: rgba(238, 232, 213, 0.78);
    box-shadow: inset 0 0 18px rgba(76, 66, 44, 0.2), 0 5px 12px rgba(0, 0, 0, 0.34);
    color: #211d16;
    padding: 0;
}
.tile--danger { background: rgba(153, 52, 52, 0.9); border-color: #dc7062; }
.tile--here { border-color: #f5d98a; box-shadow: inset 0 0 18px rgba(76, 66, 44, 0.2), 0 0 20px rgba(245, 217, 138, 0.62); border-width: 2px; }
button.tile { cursor: pointer; }
button.tile:hover, button.tile:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
button.tile:disabled { cursor: wait; }
.tile__person {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(90%, 66px);
    height: min(90%, 66px);
    transform: translate(-50%, -56%) rotateX(-35deg);
    transform-origin: center bottom;
    color: #18140d;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55));
}
.tile__person .ic { width: 100%; height: 100%; stroke-width: 2.4; }
.tile__cooldown { position: absolute; inset: -7px; z-index: 2; display: grid; place-items: center; color: #211d16; }
@property --cooldown-angle { syntax: '<angle>'; initial-value: 360deg; inherits: false; }
.tile__cooldown-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#b52626 var(--cooldown-angle), transparent 0); mask: radial-gradient(ellipse, transparent 58%, #000 60% 70%, transparent 72%); animation: cooldown-ring var(--cooldown) linear forwards; }
.tile__cooldown b { position: absolute; right: -2px; bottom: -2px; min-width: 17px; padding: 2px; border-radius: 50%; background: #eee8d5; font-size: 11px; line-height: 13px; text-align: center; }
@keyframes cooldown-ring { to { --cooldown-angle: 0deg; } }
.tile__ladder {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28px;
    height: 28px;
    transform: translate(-50%, -50%) rotateX(-35deg);
    color: #315d36;
}
.tile__ladder .ic { width: 100%; height: 100%; stroke-width: 2.5; }

/* Скопление тварей: точки видно только в соседних клетках, через одну — бледнее. */
.tile__threat {
    position: absolute;
    inset: 0;
    transform: rotateX(-35deg);
    opacity: 0;
    transition: opacity 1.9s ease-in-out;
    pointer-events: none;
}
.tile__threat--lit { opacity: .8; }
.tile__threat--far.tile__threat--lit { opacity: .32; }
.tile__threat i {
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #ff6a52;
    box-shadow: 0 0 7px 2px rgba(255, 106, 82, .75);
}
.tile--danger .tile__threat i { background: #ffd24a; box-shadow: 0 0 7px 2px rgba(255, 210, 74, .75); }
.tile__arrow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotateX(-35deg);
    color: #211d16;
}
.tile__arrow .ic { width: 36px; height: 36px; fill: currentColor; stroke: none; }
.tile__arrow--e { transform: translate(-50%, -50%) rotateX(-35deg) rotate(90deg); }
.tile__arrow--s { transform: translate(-50%, -50%) rotateX(-35deg) rotate(180deg); }
.tile__arrow--w { transform: translate(-50%, -50%) rotateX(-35deg) rotate(-90deg); }

/* Действия с содержимым текущей клетки. */
.mapbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.mapbar__acts { display: flex; flex-wrap: wrap; gap: 6px; }


/* ---------- бой ---------- */

.client--battle { grid-template-rows: minmax(min-content, 1fr) auto; overflow-y: auto; }

/* Строка бойцов тянется, нижний блок с очередью и действиями занимает ровно свою высоту. */
.stage--battle { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(250px, 1fr) auto; justify-items: center; }
.stage--battle .fight { align-self: center; }
.stage--battle > #modal { position: absolute; inset: 0; }
.battle__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5) saturate(0.8); }

.fight {
    position: relative;
    z-index: 3;
    --fight-h: clamp(180px, 24vh, 260px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(36px, 10vw, 150px);
    width: min(960px, calc(100% - var(--hud-w) - var(--hud-gap) - 24px));
    margin-right: calc(var(--hud-w) + var(--hud-gap));
    padding: 12px;
    max-width: 100%;
}
.fight__side {
    --gap: 8px;
    --unit-w: 150px;
    --unit-h: calc((var(--fight-h) - (var(--rows, 1) - 1) * var(--gap)) / var(--rows, 1));
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
    gap: var(--gap);
    align-items: center;
    align-content: center;
}
.fight__side--boss { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1fr); }
.battle-aside { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid #5a4a30; background: rgba(10, 8, 6, .92); }
.hud--battle { bottom: var(--pad); grid-template-rows: auto auto minmax(0, 1fr); }
.battle-aside__head { display: grid; gap: 5px; padding: 6px; border-bottom: 1px solid var(--line); }
.battle-aside__log { min-height: 0; overflow-y: auto; padding: 6px; font-size: 11px; }

.unit {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: 220px;
    justify-self: center;
    padding: 5px;
    background: none;
    border: 0;
    text-align: center;
    transition: transform 0.12s, filter 0.12s;
}
.unit--out { opacity: 0.48; filter: grayscale(1); }
.unit--target { filter: brightness(1.2) saturate(1.1); }
.unit--target .unit__stack::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: -2px -4px;
    border: 2px solid var(--danger);
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(214, 84, 61, .55), inset 0 0 18px rgba(214, 84, 61, .25);
    clip-path: polygon(0 0, 22% 0, 22% 3px, 78% 3px, 78% 0, 100% 0, 100% 100%, 78% 100%, 78% calc(100% - 3px), 22% calc(100% - 3px), 22% 100%, 0 100%);
    pointer-events: none;
    animation: targetPulse 1.6s ease-in-out infinite;
}
.unit--aimed { filter: brightness(1.35) saturate(1.2); }
@keyframes targetPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.fight__side--foe .unit { cursor: pointer; }
.unit--acts { transform: translateY(-4px); }
.unit--attacks { filter: brightness(1.18); }
.unit--hurt { filter: brightness(1.35) saturate(1.5); }
.unit--down { opacity: 0.5; }
.unit__stack { position: relative; display: inline-flex; flex-direction: column; gap: 3px; max-width: 100%; padding-top: 20px; vertical-align: bottom; }
.unit__name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    align-self: end;
    color: #f2e7c6;
    font-weight: 700;
    font-size: clamp(9px, calc(var(--unit-w, 190px) / 14), 14px);
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: 0 2px 3px #000, 0 0 5px #000;
}
.unit__body {
    position: relative;
    max-width: 100%;
    display: grid;
    place-items: end center;
    color: var(--accent);
}
.unit__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.unit__level { flex: 0 0 auto; }
.unit__ready { display: inline-flex; flex: 0 0 16px; width: 16px; height: 16px; }
.unit__ready .icon { width: 16px; height: 16px; }
.fightcard__actions { display: inline-flex; }
/* Овал под ногами: без него спрайт висит в воздухе над фоном локации. */
.unit__body::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: -3px;
    width: 66%;
    height: max(6px, calc(var(--unit-w, 190px) * 0.09));
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
    pointer-events: none;
}
.unit__sprite { position: relative; z-index: 1; max-width: 100%; width: auto; height: auto; max-height: var(--unit-h, 22vh); object-fit: contain; object-position: center bottom; transform-origin: center 75%; }
.fight__side--foe .unit__sprite { transform: scaleX(-1); }
.fight__side--foe .unit--out .unit__sprite { transform: scaleX(-1) rotate(180deg); transition: transform .7s cubic-bezier(.3,.8,.35,1); }
.fight__side--ally .unit--out .unit__sprite { transform: rotate(180deg); transition: transform .7s cubic-bezier(.3,.8,.35,1); }
.unit__sprite--character.paperdoll { width: min(100%, calc(var(--unit-h, 22vh) * 512 / 763)); height: auto; }
.unit--boss .unit__sprite { max-height: var(--fight-h); }
.fight__side--ally .unit--attacks .unit__body { animation: attackRight 0.5s ease-out; }
.fight__side--foe .unit--attacks .unit__body { animation: attackLeft 0.5s ease-out; }
.unit__stack > .meter { width: 100%; height: 20px; margin: 0; background: #000; }
.unit__stack > .meter span { font-size: clamp(9px, calc(var(--unit-w, 190px) / 15), 13px); line-height: 1; }
/* Метки не должны менять высоту юнита, иначе полоски жизней в ряду разъезжаются. */
.unit > .tag { position: absolute; z-index: 2; left: 50%; bottom: -9px; transform: translateX(-50%); background: rgba(10, 8, 6, .9); white-space: nowrap; }
.fight__side--foe .unit__body { color: #d08a6a; }

/* Вылетающие цифры урона и лечения. */
.float {
    position: absolute;
    left: 50%;
    top: 4px;
    transform: translateX(-50%);
    font: 46px/1 "Russo One", Impact, sans-serif;
    -webkit-text-stroke: 3px #160b07;
    paint-order: stroke fill;
    text-shadow: 0 3px 6px #000;
    pointer-events: none;
    animation: floatUp 1s ease-out forwards;
}
.float--dmg { color: #ffd45c; }
.float--crit { color: #ff594c; font-size: 62px; }
.float--heal { color: #4ee378; -webkit-text-stroke: 4px #fff; text-shadow: 0 2px 5px #000; }
.float--miss { color: #d8cdb4; font-size: 28px; }
.float--action { z-index: 6; top: -30px; display: flex; align-items: center; justify-content: center; gap: 6px; width: max-content; max-width: 240px; color: #fff4c7; font-size: 18px; line-height: 1.2; text-align: center; }
.float--action .ic { flex: none; width: 24px; height: 24px; object-fit: contain; }
.float--action { animation: floatAction 2.4s ease-in-out forwards; }
@keyframes floatAction {
    from { opacity: 0; transform: translate(-50%, 8px); }
    15%, 60% { opacity: 1; }
    to { opacity: 0; transform: translate(-50%, -52px); }
}
.blood { position: absolute; z-index: 4; left: 50%; top: 45%; width: 7px; height: 7px; border-radius: 55% 45% 60% 40%; background: #9c1714; box-shadow: 0 0 0 1px rgba(42,0,0,.45); pointer-events: none; animation: blood-spray .65s ease-out forwards; }
@keyframes blood-spray { to { opacity: 0; transform: translate(var(--blood-x), var(--blood-y)) rotate(240deg) scale(.45); } }

@keyframes floatUp {
    from { opacity: 0; transform: translate(-50%, 10px); }
    20% { opacity: 1; }
    to { opacity: 0; transform: translate(-50%, -64px); }
}
@keyframes attackRight {
    0%, 100% { transform: translateX(0); }
    45% { transform: translateX(clamp(18px, 5vw, 56px)); }
}
@keyframes attackLeft {
    0%, 100% { transform: translateX(0); }
    45% { transform: translateX(clamp(-56px, -5vw, -18px)); }
}

/* ---------- планирование хода ---------- */

.planner { min-width: 0; display: grid; gap: 5px; align-content: start; }
.planner__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.planner__empty { margin: 0; }
.ap { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); }

.battle-dock {
    position: relative;
    z-index: 8;
    justify-self: center;
    min-width: 0;
    width: max-content;
    max-width: calc(100% - var(--hud-w) - var(--hud-gap) - 2 * var(--pad) - var(--safe-r) - var(--safe-l));
    display: grid;
    gap: 6px;
    margin: 0 calc(var(--hud-w) + var(--hud-gap) + var(--pad) + var(--safe-r)) var(--pad) calc(var(--pad) + var(--safe-l));
}
.battle-dock .planner { padding: 6px; border: 1px solid #5a4a30; background: rgba(12, 10, 8, .88); }
.battle-queue { height: 110px; min-width: 0; contain: inline-size; padding-top: 16px; background: linear-gradient(180deg, transparent, rgba(12,10,8,.82) 45%); }
.queue { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; justify-content: safe center; gap: 6px; overflow-x: auto; }
.queue__item {
    position: relative;
    flex: 0 0 78px;
    width: 78px;
    aspect-ratio: 1;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    place-items: center;
    padding: 5px;
    background: linear-gradient(180deg, #262015, #110e0a);
    border: 1px solid #5a4a30;
    box-shadow: inset 0 1px rgba(255,255,255,.07), 0 3px 7px rgba(0,0,0,.38);
    font-size: 11px;
}
.queue__number { position: absolute; z-index: 2; top: 3px; left: 5px; color: #fff4c7; font: 12px/1 "Russo One", Impact, sans-serif; text-shadow: 0 1px 3px #000; }
.queue__icon { display: grid; place-items: center; min-width: 0; min-height: 0; }
.queue__icon .ic { width: 42px; height: 42px; object-fit: contain; }
.queue__mode { display: grid; place-items: center; flex: 0 0 18px; width: 18px; height: 18px; border: 1px solid var(--line); background: #110e0a; }
.queue__mode .ic { width: 12px; height: 12px; object-fit: contain; }
.queue__title { width: 100%; height: 24px; display: flex; align-items: center; justify-content: center; gap: 3px; color: #e8ddbd; font-size: 9px; line-height: 1.1; text-align: center; overflow-wrap: anywhere; }
.queue__title > span:last-child { min-width: 0; }
.queue__item:hover { border-color: var(--accent); background: #241f16; }
.queue__drop { grid-row: 1 / -1; justify-self: stretch; align-self: stretch; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.queue__drop:disabled { cursor: not-allowed; }
.queue__item:hover .queue__title { color: var(--danger); }
.queue__item--clear { flex-basis: 78px; grid-template-columns: 1fr; padding: 0; border-color: #6d3931; }
.queue__item--clear > button { align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 5px; border: 0; background: transparent; color: #daa096; font: inherit; cursor: pointer; }
.queue__item--clear .ic { width: 15px; height: 15px; }
.queue-enter { transition: opacity .22s ease, transform .22s cubic-bezier(.2,.8,.2,1); }
.queue-enter-start { opacity: 0; transform: translateY(16px) scale(.92); }
.queue-enter-end { opacity: 1; transform: translateY(0) scale(1); }

/* Линия от шага очереди к его цели. */
.aim-line { position: absolute; z-index: 9; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .12s ease; pointer-events: none; }
.aim-line.is-on { opacity: 1; }
.aim-line { color: var(--danger); }
.aim-line__beam { position: absolute; height: 3px; transform-origin: left center; background: repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 14px); filter: drop-shadow(0 0 4px #000c); animation: marching-ants .5s linear infinite; }
.aim-line__target { position: absolute; width: 32px; height: 32px; border: 3px solid currentColor; border-radius: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 0 4px #000c); }
.aim-line--heal { color: #4ee378; }
@keyframes marching-ants { to { background-position-x: 14px; } }
.queue__item.is-aiming { outline: 3px solid var(--danger); outline-offset: -1px; }
.queue__item.is-aiming--heal { outline-color: #4ee378; }

.battle-abilities { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ability-card { position: relative; width: 150px; min-height: 156px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 18px; border: 1px solid #5a4a30; background: linear-gradient(180deg, #211b13, #100c09); color: var(--ink); text-align: center; font: inherit; }
.ability-card:hover { border-color: var(--accent); }
.ability-card--selected, .ability-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.ability-card > .ic { width: 64px; height: 64px; flex: none; object-fit: contain; color: var(--accent); }
.ability-card > .ability-card__main-icon { display: grid; place-items: center; width: 64px; height: 64px; flex: none; color: var(--accent); }
.ability-card__main-icon > .ic { width: 100%; height: 100%; }
.ability-card > strong { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.ability-card > span { color: var(--muted); font-size: 10px; }
.attack-row { align-self: stretch; margin: auto -12px 0; }
.mode-addon { position: relative; z-index: 2; }
.ability-card:has(.mode-addon__toggle[aria-expanded="true"]) { z-index: 15; }
.mode-addon__toggle { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) 22px; align-items: center; gap: 4px; width: 100%; min-height: 36px; padding: 4px; border: 1px solid #6c5934; background: linear-gradient(#1b1610, #0b0908); color: #f0d99b; font: inherit; text-align: left; cursor: pointer; }
.mode-addon__toggle:hover { border-color: var(--accent); }
.mode-addon__icon { display: grid; place-items: center; }
.mode-addon__icon .ic { width: 20px; height: 20px; }
.ap-dot {
    display: inline-grid;
    place-items: center;
    width: 22px;
    min-width: 22px;
    height: 22px;
    padding: 0;
    flex: none;
    border: 2px solid #766447;
    border-radius: 50%;
    background: #0b0908;
    font: 700 10px/1 "Trebuchet MS", sans-serif;
    font-style: normal;
}
.ap-dot--0 { color: #8a8272; }
.ap-dot--1 { color: #ffffff; }
.ap-dot--2 { color: #f2dd93; }
.ap-dot--3 { color: #f0b25c; }
.ap-dot--4 { color: #e8834a; }
.ap-dot--5 { color: #e8584a; }
.mode-addon__list { position: absolute; z-index: 12; right: 0; bottom: calc(100% + 4px); list-style: none; margin: 0; padding: 2px; min-width: 200px; border: 1px solid #6c5934; background: #14110c; box-shadow: 0 6px 16px rgba(0,0,0,.6); }
.mode-addon__option { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; padding: 6px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mode-addon__option:hover, .mode-addon__option.is-on { background: #241f16; }
.mode-addon__option .mode-addon__icon .ic { width: 26px; height: 26px; }
.mode-addon__title { min-width: 0; overflow-wrap: anywhere; font-weight: 700; font-size: 10px; line-height: 1.2; }
.ability-card__action { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; background: transparent; padding: 0; cursor: pointer; }
.ability-card__action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ability-card:has(.ability-card__action:disabled) > .ic, .ability-card:has(.ability-card__action:disabled) > strong { opacity: .48; }
.ability-card:has(.ability-card__action:disabled) > .ability-card__main-icon { opacity: .48; }
.ability-card > .ability-card__ammo { display: inline-flex; align-items: center; gap: 4px; color: #cbb27a; font-size: 15px; line-height: 20px; }
.ability-card__ammo .ic { width: 16px; height: 16px; }
.ability-card--base { border-color: #6e5b32; }
.ability-card--command { cursor: pointer; }
.ability-card--command > .ic { width: 32px; height: 32px; }
.ability-card--planner { justify-content: center; }
.ability-card--planner > strong { white-space: normal; overflow-wrap: anywhere; }
.ability-card__budget { display: grid; gap: 4px; }
.ability-card__budget b { color: var(--ink); }
.ability-card:disabled, .ability-card button:disabled { opacity: 0.48; cursor: not-allowed; }
/* Износ — вертикальный столбик справа от картинки, а не полоска под кнопкой. */
.wearbar { position: absolute; right: 6px; top: 9px; width: 8px; height: 64px; display: flex; align-items: flex-end; background: #3a2a20; border: 1px solid #5a4a30; }
.wearbar b { display: block; width: 100%; height: var(--p); background: #7aaa7a; }

.dock {
    height: var(--dock-h);
    display: grid;
    grid-template-rows: 10px minmax(0, 1fr);
    width: 100%;
    margin: 0;
    background: var(--metal);
    border-top: 1px solid #5a5340;
    z-index: 7;
}
.dock__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    min-height: 0;
    padding: 2px;
}

.dock__toggle { display: none; }
@media (max-height: 620px) {
    .dock__toggle { position: fixed; z-index: 30; right: calc(6px + var(--safe-r)); bottom: calc(6px + var(--safe-b)); display: grid; place-items: center; width: 36px; height: 36px; padding: 5px; border: 1px solid var(--line); background: var(--metal); color: var(--ink); cursor: pointer; }
    .dock__toggle > span { display: grid; place-items: center; }
    .dock__toggle .ic { width: 24px; height: 24px; }
    .dock__body { padding-right: 48px; }
    .dock--collapsed { height: 0; min-height: 0; border: 0; }
    .dock--collapsed > .dock__body,
    .dock--collapsed > .dock__grip { display: none; }
}

/* Ручка изменения высоты: три точки в полоске над доком. */
.dock__grip {
    display: flex;
    gap: 3px;
    align-items: center;
    justify-content: center;
    height: 10px;
    cursor: ns-resize;
    background: #241f16;
    border-bottom: 1px solid #3a3428;
    touch-action: none;
}
.dock__grip i { width: 3px; height: 3px; background: var(--muted); border-radius: 50%; }
.dock__grip:hover i { background: var(--accent); }

.dock--battle .dock__body { grid-template-columns: minmax(0, 1fr); }

/* ---------- список участников ---------- */

.roster {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    display: grid;
    gap: 6px;
    align-content: start;
    background: #100c09;
    border: 1px solid var(--line);
    padding: 4px 6px;
    font-size: 12px;
}
.roster__place {
    position: sticky;
    top: -4px;
    margin: -4px -6px 0;
    padding: 3px 6px;
    background: none;
    border: 0;
    text-decoration: none;
    color: var(--accent);
    font-weight: bold;
}
.roster__place:hover { color: var(--ink); }
.roster__group { display: grid; gap: 1px; }
.roster__head {
    margin: 0;
    font: bold 10px/1.4 "Trebuchet MS", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}
.roster__row {
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    padding: 1px 0;
    cursor: pointer;
}
.roster__row:hover { color: var(--accent); }
.roster__row--me { color: var(--accent); }
.roster__row--npc { color: #8ab0d0; }

.fightcard { border: 1px solid #5a4a30; padding: 3px 4px; margin-bottom: 3px; }
.fightcard__head { color: var(--accent); }
.fightcard__side { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.fightcard__action { width: 24px; height: 24px; display: grid; place-items: center; padding: 2px; border: 1px solid #5a4a30; background: #18140f; color: var(--muted); cursor: pointer; }
.fightcard__action:hover { color: var(--accent); border-color: var(--accent); }
.fightcard__action--join { color: #d99586; }
.fightcard__action .ic { width: 15px; height: 15px; }

@media (prefers-reduced-motion: reduce) {
    .stage--departing, .stage--arriving, .float, .blood, .unit__sprite, .unit__body { animation-duration: .01ms !important; }
    .turn-clock, .hospital-healing__clock { transition: none; }
}

/* ---------- итоги боя ---------- */

.result__hero { display: flex; align-items: center; gap: 12px; padding: 10px 0 14px; border-bottom: 1px solid var(--line); }
.result__mark { width: 44px; height: 44px; display: grid; place-items: center; color: #c4a15a; border: 1px solid #8b713d; background: #242014; }
.result__mark .ic { width: 26px; height: 26px; }
.result__hero div { display: grid; gap: 2px; }
.result__hero b { color: var(--accent); font-size: 18px; }
.result__hero span { color: var(--muted); }

/* Итоги боя: заголовок выходит за окно, начисления набегают по очереди. */
.sheetbox--bare { overflow: visible; background: none; border: 0; box-shadow: none; }
.sheetbox--bare > .sheetbox__body { overflow: visible; padding: 0; }
.result {
    position: relative;
    width: min(460px, 86vw);
    margin-top: 42px;
    display: grid;
    gap: 8px;
    justify-items: center;
    padding: 46px 18px 16px;
    background: var(--glass);
    border: 1px solid #5a5340;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .6);
}
.result__title {
    position: absolute;
    top: -34px;
    left: 0;
    right: 0;
    margin: 0;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    color: #e8ddbd;
    font: 400 clamp(30px, 6vw, 54px)/1 "Russo One", sans-serif;
    text-transform: uppercase;
    -webkit-text-stroke: 3px #120d08;
    paint-order: stroke fill;
    text-shadow: 0 6px 14px rgba(0, 0, 0, .85);
}
.result--win .result__title { color: #ffd45c; }
.result__title .ic { width: clamp(30px, 6vw, 54px); height: clamp(30px, 6vw, 54px); stroke-width: 2.4; }
.result__where { margin: 0; color: var(--muted); }
.result__exp { margin: 6px 0 0; color: #ffd45c; font: 400 clamp(26px, 5vw, 40px)/1 "Russo One", sans-serif; font-variant-numeric: tabular-nums; }
.result__money { margin: 0; color: var(--accent); font-size: 17px; }
.result__spoils { margin: 10px 0 0; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.result__loot {
    list-style: none;
    margin: 4px 0 0;
    padding: 2px;
    width: 100%;
    max-height: 168px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 5px;
}
.result__item { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 4px; background: #100c09; border: 1px solid var(--line); }
.result__item .ic { width: 80%; height: 80%; object-fit: contain; }
.result__item b { position: absolute; right: 3px; bottom: 2px; color: #8ad08a; font-size: 13px; text-shadow: 0 1px 3px #000; }
.result__loot--loss .result__item { border-color: #6b3a32; }
.result__loot--loss .result__item b { color: #e0a49a; }
.result__up { margin: 0; color: #ffd45c; text-align: center; }
.payout { display: grid; gap: 8px; margin-top: 12px; }
.payout__row { display: grid; gap: 9px; padding: 10px; border: 1px solid var(--line); background: #100c09; }
.payout__row--win { border-color: #8b713d; box-shadow: inset 3px 0 #c4a15a; }
.payout__name { color: var(--ink); }
.payout__stats { display: flex; flex-wrap: wrap; gap: 8px; }
.payout__gain { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; color: #9dd49d; border: 1px solid #315c35; background: #152318; }
.payout__gain small { color: #6fa574; text-transform: uppercase; }
.payout__loot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 8px; border-top: 1px solid #322b20; }
.payout__label { width: 100%; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.payout__item { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; color: #e2c98d; border: 1px solid #665430; background: #211b10; }
.payout__loss { color: #d08a6a; }
.payout__up { color: var(--accent); }

.tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.tool {
    position: relative;
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    background: #2a281e;
    border: 1px solid #5a5340;
    color: var(--ink);
    cursor: pointer;
    padding: 0;
    font: 14px/1 "Trebuchet MS", sans-serif;
    text-decoration: none;
}
.tool:hover { border-color: var(--accent); }
.tool .ic { width: 28px; height: 28px; object-fit: contain; }
.tool--sm { width: 30px; height: 30px; background: var(--glass); }
.tool__dot {
    position: absolute;
    right: -3px;
    top: -3px;
    min-width: 15px;
    padding: 0 3px;
    background: var(--accent);
    color: #1a1610;
    font: 10px/15px Consolas, monospace;
    font-style: normal;
    text-align: center;
    z-index: 2;
}

.acts { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.acts__pick { display: flex; gap: 4px; align-items: center; }

.ic--generated { width: 1.8em; height: 1.8em; object-fit: contain; vertical-align: -0.45em; filter: drop-shadow(0 1px 1px #000); }
.settings-list { display: grid; gap: 10px; min-width: min(320px, 76vw); }
.setting-range { display: grid; gap: 5px; padding: 8px 10px; border: 1px solid var(--line); background: #100f0c; }
.setting-range > span { display: flex; justify-content: space-between; color: var(--ink); }
.setting-range output { color: #8ed8d2; font: 11px Consolas, monospace; }
.setting-range input[type="range"] { min-height: 20px; padding: 0; accent-color: #68aaa6; cursor: pointer; }
.acts__pick select { max-width: 180px; }

/* Иконки строкой: размер идёт от кегля, цвет — от текста. */
.ic {
    width: 1.1em;
    height: 1.1em;
    flex: none;
    vertical-align: -0.18em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ic--item {
    width: 1.8em;
    height: 1.8em;
    object-fit: contain;
    vertical-align: -0.5em;
}

.chat { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.chat__tabs { display: flex; min-width: 0; }
.chat__tab-list { display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.chat__tab-list::after { content: ""; flex: 1; border-bottom: 1px solid var(--line); }
.chat__tab, .chat__add {
    flex: none; height: 24px; border: 1px solid var(--line); background: #100c09;
    color: var(--muted); padding: 3px 8px; font: 11px/1.2 "Trebuchet MS", sans-serif; cursor: pointer;
}
.chat__tab { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 3px 3px 0 0; }
.chat__tab + .chat__tab { border-left: 0; }
.chat__tab--pinned { position: sticky; left: 0; z-index: 1; }
.chat__tab-list.is-dragging { user-select: none; cursor: grabbing; }
.chat__tab-list.is-dragging .chat__tab { transition: transform .16s ease; cursor: grabbing; }
.chat__tab--placeholder { opacity: .25; outline: 1px dashed var(--accent); outline-offset: -2px; }
.chat__tab-ghost { position: fixed; z-index: 10000; pointer-events: none; opacity: .95; color: var(--accent); box-shadow: 0 3px 8px #0008; }
@media (prefers-reduced-motion: reduce) {
    .chat__tab-list.is-dragging .chat__tab { transition: none; }
}
.chat__tab.is-active { color: var(--accent); border-bottom-color: transparent; }
.chat__tab:hover, .chat__add:hover { color: var(--ink); }
.chat__add { width: 26px; padding: 0; font-size: 16px; font-weight: 700; }
.chat__add:disabled { opacity: .4; cursor: default; }
.chat__tab-menu { width: min(240px, calc(100vw - 16px)); min-width: 0; max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; }
.chat__tab-menu fieldset { border: 0; margin: 0; padding: 4px; min-width: 0; }
.chat__tab-title { display: grid; gap: 4px; padding: 4px 6px 8px; color: var(--muted); }
.chat__tab-title input { width: 100%; min-width: 0; }
.chat__filter { display: flex; align-items: center; gap: 8px; padding: 5px 6px; cursor: pointer; }
.chat__filter input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--accent); }
.chat__tab-menu button { width: 100%; grid-template-columns: minmax(0, 1fr); }
.chat__tab-menu button:disabled { opacity: .4; cursor: default; }
.chat__tab-menu .chat__tab-delete { grid-template-columns: 20px minmax(0, 1fr); }
.chat__tab-menu .chat__tab-delete { border-top: 1px solid var(--line); margin-top: 4px; color: #e3a398; }
.chat__log {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    background: #100c09;
    border: 1px solid var(--line);
    border-top: 0;
    padding: 4px 6px;
    font: 12px/1.4 Consolas, "Courier New", monospace;
}
.chat__log p { margin: 0 0 2px; }
.chat__sys { color: var(--muted); }
.chat__message--to .chat__recipient { color: #e1bd72; }
.chat__time { margin-right: 4px; color: #6f6857; font-size: 10px; font-variant-numeric: tabular-nums; }
.chat__message--private { color: #bd9ee8; }
.chat__private-prefix, .chat__private-prefix .chat__name { color: #8f75b3; }
.chat__message--npc { color: #b8c7af; }
.chat__message--npc::before { content: "[диалог] "; color: #7f9875; }
.chat__message--system { color: #f0cf8a; font: italic 700 12px/1.35 "Trebuchet MS", sans-serif; letter-spacing: .01em; }
.chat__from { white-space: nowrap; }
.chat__ref,
.text-ref {
    padding: 0;
    border: 0;
    background: none;
    color: #e1bd72;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.reference-window__portrait,
.reference-window__location {
    display: block;
    width: min(100%, 520px);
    max-height: 48vh;
    margin: 0 auto 16px;
    object-fit: contain;
}
.chat__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-top: 4px; }

.log { margin: 0 0 2px; }
.log--you { color: #cfe0c0; }
.log--foe { color: #e0b0a8; }
.log--sys { color: var(--accent); }

/* ---------- узкий экран ---------- */

@media (max-width: 900px) {
    :root { --pad: 6px; --dock-h: 190px; }
    .client { --hud-w: 142px; --hud-gap: 6px; }

    .stage__top { font-size: 11px; }
    .face { width: 34px; height: 34px; }
    .hud__card { font-size: 12px; }

    .overlay { padding: 4px; }
    .overlay--building {
        padding-right: calc(var(--hud-w) + var(--hud-gap) + var(--pad) + var(--safe-r));
        padding-bottom: 10px;
    }
    .building { width: min(960px, 100%); }
    .tab { padding: 6px 10px; font-size: 12px; }
    .sheetbox { width: auto; }
    .sheetbox--wide { width: min(1100px, 100%); }

    .cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .rowform { grid-template-columns: minmax(0, 1fr) 1fr; }
    /* Три колонки не помещаются: складываем их в одну. */
    .sheet, .sheet--guest { grid-template-columns: minmax(0, 1fr); }
    .sheet:has(> .sheet-profile--history) { grid-template-rows: minmax(0, 1fr); }
    .sheet:has(> .sheet-profile--history) > .sheet__col { display: none; }
    .maze-viewport { --cell: 48px; width: min(92vw, 26rem); height: min(52vh, 22rem); }

    .dock__body { grid-template-columns: minmax(0, 1fr) 180px; }
    .dock--battle .dock__body { grid-template-columns: minmax(0, 1fr); }
    .tool { width: 40px; height: 40px; }
    .battle-abilities { grid-template-columns: repeat(auto-fit, 112px); }
    .ability-card { width: 138px; }
    .acts__pick select { max-width: 120px; }
}

@media (max-width: 900px) {
    :root { --dock-h: 150px; }
}

@media (orientation: portrait) {
    .body--game .client > :not(.rotate-device) { display: none; }
    .body--game .rotate-device {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: grid;
        place-content: center;
        gap: 8px;
        padding: 24px;
        background: #090806;
        color: var(--ink);
        text-align: center;
    }
    .rotate-device b { color: var(--accent); font-size: 20px; }
    .rotate-device span { color: var(--muted); }
}

/* ---------- подтверждение (общий <dialog> игры и админки, ui/confirm.js) ---------- */
.confirm-dialog {
    box-sizing: border-box;
    width: min(440px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 1px solid #5a5340;
    border-radius: 0;
    background: var(--glass, rgba(16, 14, 10, .97));
    color: var(--ink, #d8d0b8);
    font: 14px/1.4 "PT Sans", "Trebuchet MS", sans-serif;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .6);
}
.confirm-dialog::backdrop { background: rgba(8, 7, 5, .65); }
.confirm-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; background: var(--metal, linear-gradient(#3a3830, #1e1c18)); border-bottom: 1px solid #2a281e; }
.confirm-dialog__message { margin: 0; padding: 18px 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.confirm-dialog__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; }
.confirm-dialog button { border: 1px solid #6a5a38; border-radius: 0; background: var(--metal, linear-gradient(#3a3830, #1e1c18)); color: inherit; font: inherit; cursor: pointer; }
.confirm-dialog__actions button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 6px 16px; }
.confirm-dialog__actions button > .ic { width: 28px; height: 28px; flex: 0 0 28px; }
.confirm-dialog button:hover { border-color: #c4a15a; color: #fff0c2; }
.confirm-dialog button:focus-visible { outline: 2px solid #c4a15a; outline-offset: 2px; }
.confirm-dialog button[data-confirm-result="confirm"] { border-color: #aa8950; }
.confirm-dialog .confirm-dialog__close { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; padding: 0; }
.confirm-dialog__close .ic { width: 15px; height: 15px; }