:root { --bg: #15120f; --card: #221d18; --fg: #e9e1d6; --muted: #9a8f82; --accent: #c0392b; --line: #3a322a; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 system-ui, sans-serif; }
header { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
header nav { display: flex; gap: 12px; align-items: center; }
header form { margin: 0; }
.logo { font-weight: 700; color: var(--accent); text-decoration: none; font-size: 18px; }
main { max-width: 760px; margin: 0 auto; padding: 16px; }
a { color: #e4a853; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
form.card { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 13px; }
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--fg); }
input { padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; }
button, .btn { padding: 7px 14px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--fg); font: inherit; cursor: pointer; text-decoration: none; display: inline-block; }
.btn { background: var(--accent); border-color: var(--accent); color: #fff; }
button:disabled { opacity: .45; cursor: not-allowed; }
.errors { color: #ff7b6b; }
.flash { background: #1f3a26; border: 1px solid #2f6b3f; padding: 8px 12px; border-radius: 6px; }
.muted { color: var(--muted); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
main.wide { max-width: 1100px; }
/* бой: вы слева, соперник справа, ход по центру; на телефоне — столбиком */
.arena { display: grid; grid-template-columns: 1fr minmax(320px, 1.3fr) 1fr; gap: 16px; align-items: start; }
.arena .center { text-align: center; }
.arena .center h2 { margin-top: 0; }
.fighter h2 { margin: 0 0 8px; }
.fighter.them { text-align: right; }
.hpbar { height: 10px; background: var(--bg); border-radius: 5px; overflow: hidden; border: 1px solid var(--line); }
.hpbar div { height: 100%; background: #3f9b4f; transition: width .4s; }
.hp-0{width:0%} .hp-5{width:5%} .hp-10{width:10%} .hp-15{width:15%} .hp-20{width:20%} .hp-25{width:25%} .hp-30{width:30%} .hp-35{width:35%} .hp-40{width:40%} .hp-45{width:45%} .hp-50{width:50%} .hp-55{width:55%} .hp-60{width:60%} .hp-65{width:65%} .hp-70{width:70%} .hp-75{width:75%} .hp-80{width:80%} .hp-85{width:85%} .hp-90{width:90%} .hp-95{width:95%} .hp-100{width:100%}
.fighter.them .hpbar div { margin-left: auto; background: var(--accent); }
form.turn { display: flex; flex-direction: column; gap: 12px; }
.zones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: left; }
fieldset { border: 1px solid var(--line); border-radius: 6px; display: flex; flex-direction: column; gap: 6px; margin: 0; }
legend { color: var(--muted); padding: 0 4px; }
.result { font-size: 26px; }
.log p { margin: 2px 0; }
.log-dodge, .log-parry { color: #5aa9ff; }
.log-crit { color: #ff8a65; font-weight: 600; }
.log-pierce { color: #c792ea; }
.log-block { color: var(--muted); } .log-absorb { color: #f2c230; }
.log-heal { color: #ff6b5e; font-weight: 600; }
@media (max-width: 800px) {
  .arena { grid-template-columns: 1fr 1fr; }
  .arena .center { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 480px) { .zones { grid-template-columns: 1fr; } }
.stats { width: auto; } .stats td { padding: 3px 10px 3px 0; border: 0; } .stats form { margin: 0; } .stats button { padding: 0 9px; }

.bag { display: grid; gap: 8px; }
.bag { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.slot { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 8px; min-height: 52px; font-size: 14px; }
.slot.empty { display: flex; align-items: center; justify-content: center; border-style: dashed; }
.slot form { margin: 6px 0 0; } .slot button { padding: 2px 10px; }
.bad { color: #e74c3c; }

/* кукла: 64px | центр | 64px; высоты ячеек как в классике — шлем квадрат, оружие/броня высокие, пояс/обувь низкие */
.charpage { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.doll2 { width: 280px; max-width: 100%; }
.fighter.them .doll2 { margin-left: auto; }
.doll-name { font-weight: bold; text-align: center; margin-bottom: 6px; }
.doll-grid { display: grid; grid-template-columns: 64px 1fr 64px; gap: 4px; }
.dcol { display: flex; flex-direction: column; gap: 4px; }
.dmid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hp-text { text-align: center; font-size: 12px; color: var(--muted); }
.dmini { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
/* фигура не задаёт высоту куклы (contain: size) — занимает, что осталось в средней колонке, поэтому ряд ячеек пояса встаёт вровень с обувью */
.figure { fill: var(--line); flex: 1 1 0; min-height: 0; contain: size; width: 100%; max-height: 230px; }
.ds { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin: 0;
      display: flex; align-items: center; justify-content: center; text-align: center; font-size: 10px; line-height: 1.15; padding: 0; }
.ds.empty { border-style: dashed; opacity: .6; }
.ds button { all: unset; cursor: pointer; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.ds button:hover { background: var(--card); }
.ds img { max-width: 100%; max-height: 100%; }
.ds span { padding: 2px; hyphens: auto; overflow-wrap: anywhere; }
.ds-sq { height: 64px; } .ds-short { height: 38px; } .ds-tall { height: 88px; } .ds-long { height: 128px; } .ds-mini { height: 26px; }
@media (max-width: 760px) { .charpage { grid-template-columns: 1fr; } .doll2, .fighter.them .doll2 { margin: 0 auto; } }

/* чат внизу страницы */
body { padding-bottom: 290px; }
body:has(.chatdock.collapsed) { padding-bottom: 50px; }
.chatdock { position: fixed; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--line); padding: 6px 12px 4px; z-index: 10; }
.chat-head { display: flex; justify-content: space-between; align-items: center; }
.chat-head button { padding: 0 8px; }
.chatdock.collapsed .chat-body, .chatdock.collapsed #chat-form, .chatdock.collapsed .chat-emo, .chatdock.collapsed .chat-err { display: none; }
.chat-body { display: grid; grid-template-columns: 1fr 160px; gap: 8px; margin: 4px 0; }
.chat-log { height: var(--chat-h, 180px); overflow-y: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
.chat-log p { margin: 1px 0; overflow-wrap: anywhere; }
.chat-here { height: var(--chat-h, 180px); overflow-y: auto; font-size: 14px; }
.chat-name { color: var(--fg); font-weight: 600; text-decoration: none; }
.chat-name:hover { text-decoration: underline; }
.finfo { display: inline-block; margin-left: 3px; line-height: 0; vertical-align: -2px; } .finfo img { width: 14px; height: 14px; }
.finfo:hover img { filter: brightness(1.3); }
.chat-private { color: #c792ea; } .chat-tag { font-size: 12px; }
.chat-tome { background: rgba(192, 57, 43, .18); }
#chat-form { display: flex; gap: 6px; align-items: center; } #chat-form input[name=text] { flex: 1; min-width: 0; }
.chat-to { white-space: nowrap; } .chat-to button { padding: 0 5px; }
.chat-priv { display: flex; flex-direction: row; align-items: center; gap: 4px; white-space: nowrap; color: var(--muted); }
.chat-emo { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; }
.chat-emo[hidden] { display: none; }   /* display: flex перебивал атрибут hidden */
.chat-emo .emo { padding: 2px 5px; font-size: 18px; border: 0; }
.chat-err { margin: 2px 0 0; min-height: 1em; font-size: 13px; }
@media (max-width: 760px) { .chat-body { grid-template-columns: 1fr; } .chat-here { display: none; } .chat-log, .chat-fightlog { height: var(--chat-h, 130px); } body { padding-bottom: 240px; } }

/* админка: форма предмета в две колонки */
form.item-form { max-width: 720px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
@media (max-width: 760px) { form.item-form { grid-template-columns: 1fr; } }

.slot.unfit { opacity: .7; }   /* в магазине: не подходит по уровню/статам */

/* картинки вещей */
.item-pic { float: left; width: 48px; height: 48px; margin: 0 8px 4px 0; background: var(--bg); border-radius: 6px; }
.ds img { width: 100%; height: 100%; object-fit: contain; }
table.icons td { text-align: center; padding: 4px; } table.icons svg { width: 56px; height: 56px; background: var(--bg); border-radius: 6px; }

/* панель: ручка высоты и вкладки боя */
.chat-resize { height: 7px; margin: -6px -12px 2px; cursor: ns-resize; touch-action: none; }
.chat-resize::after { content: ''; display: block; width: 48px; height: 3px; margin: 2px auto 0; border-radius: 2px; background: var(--line); }
.chat-resize:hover::after { background: var(--muted); }
.chatdock.collapsed .chat-resize, .chatdock.collapsed .chat-fightlog { display: none; }
.chat-tabs { display: flex; gap: 4px; } .chat-tab { padding: 2px 12px; } .chat-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.chat-fightlog { display: none; height: var(--chat-h, 180px); overflow-y: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; margin: 4px 0; }
.chat-fightlog p { margin: 1px 0; }
.chatdock.tab-log .chat-fightlog { display: block; }
.chatdock.tab-log .chat-body, .chatdock.tab-log #chat-form, .chatdock.tab-log .chat-emo, .chatdock.tab-log .chat-err { display: none; }

/* удары двумя руками в одном блоке: два столбца кнопок */
.zrow { display: flex; align-items: center; gap: 8px; color: var(--fg); }
.zrow label { cursor: pointer; }

/* образы */
img.figure.skin { object-fit: contain; object-position: center bottom; height: auto; }
.skins { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.skin-card { width: 130px; border: 1px solid var(--line); border-radius: 6px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.skin-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.skin-card img { width: 96px; height: 160px; object-fit: contain; }
.skins-adm img { width: 48px; height: 80px; object-fit: contain; }
.skins-adm input[type=number] { width: 70px; }
.good { color: #6fbf73; }

/* фильтры витрины */
.filters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.filters.card { padding: 10px 12px; position: sticky; top: 0; z-index: 5; }   /* фильтры витрины видны при прокрутке */
.flt-name { display: inline-block; width: 64px; color: var(--muted); font-size: 13px; }
.subnav { margin: 4px 0 8px; font-size: 14px; }
form.buy { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
form.buy + .bag { margin-top: 10px; }
.chip { display: inline-block; padding: 2px 8px; margin: 2px 2px 2px 0; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--fg); font-size: 13px; }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: normal; }
a.chip:hover { border-color: var(--accent); }
/* пещера: каменные стены, туман, свет факела вокруг героя */
.dungeon { --stone: #3b3128; --floor: #241d17; --wall: #8a7558; --torch: #e4a853; background: radial-gradient(ellipse at top, #2a2119 0%, #110d0a 70%); border: 1px solid #000; border-radius: 10px; padding: 16px; box-shadow: inset 0 0 60px #000; }
/* ледяная пещера: иней вместо сырого камня */
.dungeon.ice { --stone: #2c3a44; --floor: #1b2832; --wall: #a9dcf5; --torch: #bfe9ff; background: radial-gradient(ellipse at top, #1d2c38 0%, #070b10 70%); }
.dungeon.ice h1 { text-shadow: 0 0 12px #5fb8e880; }
.dungeon.ice .maze { background: #03070a; }
.dungeon.ice .maze .fl.mem { fill: #111a21; }
.dungeon.ice .maze .wall { stroke-width: 1.2; filter: drop-shadow(0 0 .5px #6fc3ef); }
.dungeon.ice .cave-card { background: linear-gradient(160deg, #1f2e39, #141c22); border-color: #3d6a85; }
.cave-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.cave-pick h2 { margin: 0 0 4px; }
.cave-pick.ice { background: linear-gradient(160deg, #1f2e39, #141c22); border-color: #3d6a85; }
.dungeon h1 { font-family: Georgia, 'Times New Roman', serif; color: var(--torch); letter-spacing: 1px; text-shadow: 0 0 12px #c0392b80; margin-top: 0; }
.cave-card { background: linear-gradient(#2b231c, #1d1813); border-color: #4a3d30; }
.cave { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.maze { max-width: 640px; background: #050403; border-radius: 6px; box-shadow: 0 0 0 2px #000, 0 0 40px #000; }
.maze svg { display: block; width: 100%; height: auto; }   /* размер задаёт viewBox — клетки не прыгают */
.maze .fl { fill: var(--floor); }
.maze .fl.mem { fill: #17120e; }
.maze .wall { fill: none; stroke: var(--wall); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 .6px #000); }
.maze .frame { fill: none; stroke: var(--wall); stroke-width: 2; stroke-linejoin: round; }
.maze .ico { font-size: 6px; text-anchor: middle; dominant-baseline: middle; }
.maze .ico.mem { opacity: .5; }
.maze .ico.chest-open, .maze .ico.trap-off, .maze .ico.in { fill: #8a7c6c; }
.maze .ico.boss { filter: drop-shadow(0 0 1.5px #c0392b); }
.maze .hero { filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 2px rgba(255, 180, 80, .5)); }
/* эффекты последнего шага в пещере: удар ловушки, отскок, обезвреживание (views/cave.php) */
/* итог прошлого забега на входе в пещеру */
.cave-result h2 { margin: 0 0 4px; }
.cave-result.end-dead { border-left: 4px solid #c0392b; }
.cave-result.end-exit { border-left: 4px solid #7fd36b; }
.cave-result.end-surrender { border-left: 4px solid #8a7c6c; }
.result-nums { display: flex; gap: 24px; margin: 10px 0; }
.result-nums div { display: flex; flex-direction: column; color: var(--muted); font-size: .85em; }
.result-nums b { font-size: 1.8em; color: var(--fg); line-height: 1.1; }
.maze .fx { pointer-events: none; }
.maze .fx * { transform-box: fill-box; }
.maze .hero { transform-box: fill-box; transform-origin: center bottom; }
.maze .hero.hurt { animation: fx-hurt 1s ease-out .25s both; }
.maze .hero.leap { animation: fx-leap .7s ease-out .1s both; }
.maze .fx-trap { animation: fx-gone 2.6s linear forwards; }
.maze .fx-blood { opacity: 0; animation: fx-blood 1s ease-out .25s; }
.maze .fx-rise { transform-origin: center bottom; animation: fx-rise .5s cubic-bezier(.2, 1.6, .4, 1) .15s both; }
.maze .fx-fly { animation: fx-fly .35s ease-in both; }
.maze .fx-fall { animation: fx-fall .45s cubic-bezier(.5, 0, 1, .6) both; }
.maze .fx-dust { opacity: 0; transform-origin: center; animation: fx-dust 1s ease-out .45s; }
.maze .fx-flame { transform-origin: center bottom; animation: fx-flame .9s ease-out .1s both; }
.maze .d0 { animation-delay: .1s; } .maze .d1 { animation-delay: .22s; } .maze .d2 { animation-delay: .34s; }
.maze .fx-ring { transform-origin: center; animation: fx-ring 1.6s ease-out both; }
.maze .fx-label { font-size: 2.6px; font-weight: bold; text-anchor: middle; paint-order: stroke; stroke: #000; stroke-width: .5px;
                  animation: fx-label 2.4s ease-out both; }
.maze .fx-label.good { fill: #9be07f; }
@keyframes fx-hurt { 0% { filter: none; transform: none; } 15% { filter: drop-shadow(0 0 1.5px #ff2a1a) sepia(1) saturate(6) hue-rotate(-40deg); transform: translateX(-.6px) rotate(-4deg); }
  35% { transform: translateX(.6px) rotate(3deg); } 55% { transform: translateX(-.3px); } 100% { transform: none; } }
@keyframes fx-leap { 0% { transform: none; } 40% { transform: translate(-1.4px, -2.6px) rotate(-8deg); } 100% { transform: none; } }
@keyframes fx-gone { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-blood { 0% { opacity: .55; } 100% { opacity: 0; } }
@keyframes fx-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fx-fly { from { transform: translateX(-10px); opacity: 0; } 30% { opacity: 1; } to { transform: none; } }
@keyframes fx-fall { from { transform: translateY(-12px); opacity: 0; } 20% { opacity: 1; } to { transform: none; } }
@keyframes fx-dust { 0% { opacity: .7; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes fx-flame { 0% { transform: scale(.3, 0); } 30% { transform: scale(1.1, 1.25); } 50% { transform: scale(.9, 1); }
  70% { transform: scale(1.05, 1.15); } 100% { transform: scale(1); } }
@keyframes fx-ring { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes fx-label { 0% { transform: translateY(2px); opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-2px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .maze .fx *, .maze .hero { animation-duration: .01s !important; } }
.cave-side p { margin: 6px 0; }
.dpad { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 44px); gap: 4px; justify-content: center; margin: 12px 0; }
.dpad button { font-size: 20px; padding: 0; background: #2f261e; border-color: #5a4a3a; }
.dpad .d-n { grid-column: 2; grid-row: 1; } .dpad .d-w { grid-column: 1; grid-row: 2; } .dpad .d-e { grid-column: 3; grid-row: 2; } .dpad .d-s { grid-column: 2; grid-row: 3; }
.dpad .d-wait { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: center; color: var(--torch); font-size: 13px; }
.cave-log { font-size: 13px; }
.cave-log p { margin: 1px 0; }
.cave-log p:first-child { color: var(--torch); }
@media (max-width: 760px) { .cave { grid-template-columns: 1fr; } }
/* вкладки магазина */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tab { padding: 6px 16px; border: 1px solid var(--line); border-bottom: none; border-radius: 6px 6px 0 0; text-decoration: none; color: var(--fg); background: var(--card); }
.tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* HP, растущее само (hp.js): в шапке — коротко, в таблице — в строку */
.hp-live.top { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.hp-live.top .hpbar { width: 80px; }
.hp-live.top .hp-full { display: none; }
.hp-live.inline .hpbar { max-width: 160px; }
/* эликсир: колба под кольцами на кукле, в магазине и сумке */
/* ячейки пояса: ряд боевых эликсиров (красный) и ряд свитков (пергамент); до 5 — под ногами, 6–10 — под куклой во всю ширину (.wide) */
.dbelt { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 142px; margin: 0 auto; }
.dcell { width: 26px; height: 26px; flex: none; }
.dbelt.wide { max-width: none; margin-top: 4px; gap: 3px; } .dbelt.wide .dcell { width: 25px; height: 25px; }
.dbelt.elx .dcell { border-color: #b0473a; background: #2a1512; }
.dbelt.scr .dcell { border-color: #c9a55a; background: #2a2414; }
.dstage { position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.dover { position: absolute; z-index: 1; top: 2px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.dover img { pointer-events: auto; }
.delixir { display: flex; flex-direction: column; gap: 2px; }
.delixir img { width: 34px; height: 34px; filter: drop-shadow(0 0 4px #ffffff40); }
.slot.elixir .item-pic { width: 48px; height: 48px; }

/* боевые эликсиры: в ячейке пояса и выбор «Пояс» в ходе */
.dcell img { width: 100%; height: 100%; }
.dpoints { display: flex; justify-content: center; gap: 6px; margin: 4px auto 3px; font-size: 12px; font-weight: bold; }
.dpoints .pt { display: inline-flex; align-items: center; gap: 1px; } .dpoints .pt img { width: 14px; height: 14px; } .dpoints .pt.off { opacity: .35; }
.trow { display: grid; grid-template-columns: repeat(5, 52px); gap: 4px; justify-content: center; margin: 8px 0 16px; }
.tcell { width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); margin: 0; padding: 0; }
.tcell.empty { border-style: dashed; }
.tcell img { width: 100%; height: 100%; display: block; }
.tcell button { width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.tcell.off { opacity: .35; } .tcell.on { box-shadow: 0 0 0 2px #f2c230, 0 0 10px #f2c230; }
.tricks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.slot.trick { display: flex; flex-direction: column; } .trick-head { display: flex; gap: 8px; } .trick-head .item-pic { float: none; flex: none; margin: 0; }
.slot.trick > form, .slot.trick > .good { margin-top: auto; padding-top: 6px; }   /* кнопки — по низу карточки, в одну линию */
.tcost { white-space: nowrap; font-size: 12px; } .tcost .pt img { width: 14px; height: 14px; vertical-align: -2px; }
.log-trick { color: #f2c230; }
.darmed { display: flex; flex-direction: column; gap: 3px; margin-left: auto; } .darmed img { width: 22px; height: 22px; }
.ticon { width: 18px; height: 18px; vertical-align: -4px; }
a.tcell { display: block; }
.cover-form { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-start; max-width: 300px; margin: 0 auto 16px; }
.cover-form > b { flex-basis: 100%; } .cover-form fieldset { border: 1px solid var(--line); border-radius: 6px; margin: 0; padding: 4px 8px; }
.belt-use { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 8px 0; }
.belt-use img { width: 22px; height: 22px; vertical-align: middle; }
.belt-use .off { opacity: .45; }
.belt-use p { flex-basis: 100%; margin: 0; }

/* меню: текущий раздел, свободные очки */
header nav a.on { color: var(--fg); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--accent); }
.badge { background: var(--accent); color: #fff; border-radius: 9px; padding: 0 6px; font-size: 12px; margin-left: -8px; }
.stat-hint { font-size: 12px; }
.me-bar > div:first-child { margin-bottom: 6px; }

/* бой на разменах: очередь соперников, составы сторон, выбывшие */
.queue { font-size: 14px; }
.fighter.down { opacity: .5; }
.teams { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.team h3 { margin-top: 0; }
.team-row { display: grid; grid-template-columns: 1fr 120px 64px; gap: 8px; align-items: center; padding: 3px 0; }
.team-row.down { opacity: .45; text-decoration: line-through; }
@media (max-width: 760px) { .teams { grid-template-columns: 1fr; } }

/* заявки на бои игроков (вкладки арены) */
form.app-form { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; align-items: center; max-width: none; padding: 12px 16px; text-align: left; }
.app-form > b { flex-basis: 100%; }
.app-form label { flex-direction: row; gap: 6px; align-items: center; }
.app-form .btn { margin-left: auto; }
.app-form .muted { flex-basis: 100%; font-size: 13px; }
.apps { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
.apps.list { grid-template-columns: 1fr; gap: 8px; }
.apps.list .app { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.apps.list .app > div:first-child { flex: 1; }
.apps.list .app p, .apps.list .app form { margin: 0; }
.app { padding: 10px 12px; margin: 0; }
.app.mine { border-color: var(--accent); }
.app.unfit { opacity: .6; }
.app p { margin: 6px 0; }
.app form { margin: 6px 0 0; } .app form.inline { display: inline-block; margin-right: 6px; }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.side { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.side-1 { border-top: 3px solid #c0392b; } .side-2 { border-top: 3px solid #2f6fb3; }
/* свитки заточки: запас в сумке персонажа и таблица шансов в магазине */
.scrolls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.scroll-have { display: inline-flex; align-items: center; gap: 4px; }
.scroll-have img { width: 22px; height: 22px; }
table.sharp-odds { border-collapse: collapse; margin: 8px 0 14px; }
table.sharp-odds th, table.sharp-odds td { border: 1px solid var(--line); padding: 4px 10px; text-align: center; }
/* арена: тень и противники по классам */
.arena-card h2 { margin: 0 0 4px; }
table.arena-opps { width: 100%; border-collapse: collapse; }
table.arena-opps button { white-space: nowrap; }
table.arena-opps td, table.arena-opps th { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; }
/* свитки очков в бою: ряд под строкой приёмов */
.pscroll-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.pscroll-row form { margin: 0; }
.pscroll-row button { padding: 2px; line-height: 0; }
.pscroll-row img { width: 32px; height: 32px; }
.pscroll-row .off { opacity: .4; line-height: 0; }

/* стартовая для гостя */
.hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: center; padding: 20px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.hero h1 { font-size: 34px; margin: 0 0 8px; color: var(--accent); letter-spacing: .5px; }
.hero-lead { font-size: 17px; }
.hero-pics { display: flex; justify-content: center; align-items: flex-end; }
.hero-pics img { width: 33%; max-width: 110px; height: auto; filter: drop-shadow(0 6px 10px #000); }
.hero-pics img:nth-child(2) { width: 40%; max-width: 135px; margin: 0 -8px; position: relative; z-index: 1; }
.btn-big { padding: 10px 22px; font-size: 16px; font-weight: 600; }
.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.features .card { margin: 0; }
.features h3 { margin: 0 0 6px; color: #e4a853; font-size: 16px; }
.features p { margin: 0; font-size: 14px; }
.steps { padding-left: 22px; } .steps li { margin-bottom: 6px; }
.foot { margin-top: 24px; text-align: center; }
@media (max-width: 600px) { .hero { grid-template-columns: 1fr; } .hero-pics { order: -1; } .hero h1 { font-size: 28px; } }
.card > p:first-child { margin-top: 0; } .card > p:last-child { margin-bottom: 0; }
.chat-mute button { padding: 0 4px; font-size: 12px; line-height: 1.3; } .chat-mute > button { opacity: .5; } .chat-mute > button:hover { opacity: 1; }
.mute-adm { margin: 0; white-space: nowrap; } .mute-adm button { padding: 0 6px; }
.chat-del { padding: 0 5px; font-size: 12px; line-height: 1.3; opacity: .4; } .chat-del:hover { opacity: 1; color: var(--accent); }
.mod-act { white-space: nowrap; } .mod-act form { display: inline; margin: 0 4px 0 0; } .mod-act button { padding: 1px 8px; }
/* склонности: значок перед ником и панель */
.fbadge { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.fbadge-big { width: 48px; height: 48px; flex: none; }
.faction-panel { display: flex; gap: 12px; align-items: center; }
.faction-panel form { margin: 6px 0 2px; }
.faction-light { border-color: #8ccff0; background: linear-gradient(135deg, #2a2a1c, #1f2a33); }
.faction-dark { border-color: #8a1c14; background: linear-gradient(135deg, #1a0f0e, #2a1210); }
.faction-neutral { border-color: #8d857a; }
.chat-system { color: #e4a853; font-style: italic; }
/* новости */
.news h1, .news h2 { margin: 0 0 4px; } .news h2 a { color: var(--fg); text-decoration: none; } .news h2 a:hover { color: #e4a853; }
.news ul { padding-left: 20px; }
.news-short p { margin: 4px 0 0; font-size: 14px; }
.news-form { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
textarea { padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; resize: vertical; }

/* отношения: друзья / враги / игнор (relations.php, chat.js) */
.chat-name.rel-friend, .rel-h.rel-friend { color: #4caf50; }
.chat-name.rel-enemy, .rel-h.rel-enemy { color: #e74c3c; }
.chat-name.rel-ignore, .rel-h.rel-ignore { color: #8a8a8a; font-weight: 400; }
.name-menu { position: fixed; z-index: 1000; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.35); padding: 4px; min-width: 170px; display: flex; flex-direction: column; }
.name-menu[hidden] { display: none; }
.name-menu-head { font-weight: 600; padding: 4px 10px 6px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.name-menu button { background: none; border: 0; color: var(--fg); text-align: left; padding: 7px 10px; border-radius: 5px; cursor: pointer; font: inherit; }
.name-menu button:hover { background: var(--line); }
.rel-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.app .rel-btns form { margin: 0; }
.contacts td { padding: 4px 10px 4px 0; }

/* торговля (trade.php, trade.js) */
.chat-trade { padding: 6px 10px; background: rgba(76, 175, 80, .12); border-bottom: 1px solid var(--line); font-size: 14px; }
.chat-trade[hidden] { display: none; }
.trade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.trade-side.ready { border-color: #4caf50; }
.trade-goods { padding-left: 18px; }
.trade-goods li { margin: 4px 0; }
.trade-goods li.has-tip { cursor: help; text-decoration: underline dotted; }
.trade-goods form.inline button { padding: 0 6px; }
.trade-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.trade-add select { max-width: 100%; flex: 1 1 200px; }
.trade-add input[type=number] { width: 80px; }
.trade-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.app .trade-actions form { margin: 0; }
.trade-actions .right { margin-left: auto; }
.trade-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.trade-log td { vertical-align: top; }
@media (max-width: 760px) { .trade-grid { grid-template-columns: 1fr; } }

/* кнопки контактов и склонности в строке чата, окошко над чатом */
.chat-tool { padding: 2px 6px; line-height: 0; }
.chat-tool img { width: 22px; height: 22px; }
.chat-pop { position: absolute; right: 10px; bottom: calc(100% + 6px); width: min(420px, calc(100vw - 20px)); max-height: 60vh; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 -6px 30px rgba(0,0,0,.45); padding: 10px; z-index: 50; }
.chat-pop[hidden] { display: none; }
.chat-pop .card { margin-bottom: 8px; }
.chat-pop-x { float: right; margin: -4px -2px 4px 8px; }
.pop-h { font-weight: 600; margin: 8px 0 2px; }
.pop-row { display: flex; align-items: center; gap: 4px; padding: 2px 0; }
.pop-row form.inline { margin: 0 0 0 auto; }
.pop-row button { padding: 0 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 2px; }
.dot.on { background: #4caf50; } .dot.off { background: #555; }
.skill-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.skill-form input[name=target] { flex: 1 1 140px; }
.skill-pick { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px; }
.skill-name { padding: 1px 8px; font-size: 13px; }
.skill-panel p { margin: 4px 0 8px; }