/* Бригада SOS — интерфейс для компьютера. Тот же весёлый розовый стиль, только богаче:
   матовое стекло, жёлтые акценты повязки бригады, косые ленты и наклейки, тетрадная бумага в окнах.
   Телефоны этот файл не грузят (media в index.html). */
:root {
  --f-x: "Unbounded", "M PLUS Rounded 1c", system-ui, sans-serif;   /* крупные заголовки */
  --f-d: "M PLUS Rounded 1c", "Comfortaa", system-ui, sans-serif;
  --f-b: "M PLUS Rounded 1c", "Comfortaa", system-ui, sans-serif;
  /* цвета зависят от времени суток и места: --t-* ставит ui/theme.js, здесь — дневные запасные */
  --pink: var(--t-accent, #e0216e); --pink-2: var(--t-accent-2, #ff5fa2); --pink-3: color-mix(in srgb, var(--pink-2) 70%, #fff); --pink-soft: var(--t-soft, #ffe4ef);
  --sos: var(--t-sos, #ffd23a); --sos-2: color-mix(in srgb, var(--sos) 55%, #fff);   /* жёлтая повязка */
  --line: var(--t-line, #f3cfde); --paper: var(--t-paper, #fffafc);
  --hud-ink: var(--t-ink, #2c2028); --hud-ink-2: var(--t-ink-2, #6e5a66);
  --glass: linear-gradient(180deg, var(--t-glass-1, rgba(255, 255, 255, .93)), var(--t-glass-2, rgba(255, 238, 246, .88)));
  --glass-edge: 0 0 0 1px rgba(224, 33, 110, .16), 0 12px 28px rgba(90, 20, 60, .26);
  --hp: linear-gradient(180deg, #ff8796, #f0435c 55%, #d42a44); --en: linear-gradient(180deg, #9dc8ff, #4d8ff0 55%, #3a6fd0); --xp: linear-gradient(180deg, #fff09a, #ffd23a 55%, #f0a91e);
  --shadow: 0 12px 28px rgba(90, 20, 60, .26);
  --ribbon: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);  /* косая лента */
}
html, body { font: 14px/1.45 var(--f-b); }
/* у Unbounded широкие буквы: чуть шире пробелы, чтобы слова не слипались */
.win header h3, .bars .nm, .target b, .ql .q h5, .dlg .who, .zone-title h2, .tal .br h4, .hero h4, .create h1, .tip h5 { word-spacing: .12em; }

/* ---------- стекло поверх мира ---------- */
.hud-me, .target, .hotbar, .menu, .questtrack, .ctx, .dlg {
  background: var(--glass); backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--t-glass-1, #fff) 60%, #fff); border-radius: 14px; box-shadow: var(--glass-edge); color: var(--hud-ink);
}
.questtrack .qi span, .questtrack .qz, .buffs .bf small { color: var(--hud-ink-2); }
.buffs span:not(.bf) { color: #2c2028; }

/* ---------- рамка героини: живой портрет, звёздочка уровня ---------- */
.hud-me { left: 18px; top: 18px; min-width: 330px; padding: 10px 16px 10px 104px; gap: 0; overflow: visible; }
.hud-me::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 14px 14px 0 0; background: linear-gradient(90deg, var(--pink), var(--pink-2) 60%, var(--sos)); }
.portrait { position: absolute; left: -8px; top: 50%; transform: translateY(-50%) rotate(-3deg); width: 96px; height: 96px; font: 800 36px var(--f-x);
  border: 4px solid #fff; box-shadow: 0 0 0 3px var(--pink-2), 0 0 0 7px var(--sos), 0 10px 22px rgba(90, 20, 60, .35); }
.portrait .lv { right: -8px; left: auto; bottom: -6px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 0; display: grid; place-items: center;
  background: var(--sos); color: #3a2400; font: 800 13px var(--f-x); transform: rotate(8deg); filter: drop-shadow(0 2px 2px rgba(90, 20, 60, .35));
  clip-path: polygon(50% 0, 61% 18%, 82% 10%, 80% 32%, 100% 42%, 84% 58%, 94% 79%, 71% 80%, 61% 100%, 47% 84%, 28% 96%, 25% 74%, 3% 69%, 17% 51%, 4% 31%, 26% 27%, 28% 5%, 45% 17%); }
.bars { gap: 5px; }
.bars .nm { font: 700 15px var(--f-x); color: var(--hud-ink); }
.bars .nm small { font: 700 11px var(--f-d); }
.bar { height: 15px; border-radius: 8px; background: var(--t-track, #f3dbe6); box-shadow: inset 0 1px 3px rgba(120, 30, 70, .25); }
.bar i { border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .16) 0 6px, transparent 6px 12px), var(--hp); background-size: 17px 17px, auto; animation: stripes 1.2s linear infinite; }
.bar.en i { background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .16) 0 6px, transparent 6px 12px), var(--en); }
@keyframes stripes { to { background-position: 17px 0, 0 0; } }
.bar.en { height: 11px; } .bar.en span { line-height: 11px; font-size: 11px; }
.bar span { font: 800 11px/15px var(--f-d); text-shadow: 0 0 2px rgba(90, 20, 60, .9), 0 1px 2px rgba(90, 20, 60, .9); }
.hud-me .bar.xp { display: none; }
.buffs span { border-radius: 6px; border-color: var(--line); font-weight: 700; }

/* иены — жёлтая наклейка над меню */
.yen { left: auto; top: auto; right: 18px; bottom: 124px; padding: 5px 14px 5px 10px; font: 800 14px var(--f-x); color: #6a4a00; border-radius: 999px;
  background: linear-gradient(180deg, #fff6c8, var(--sos)); border: 2px solid #fff; box-shadow: var(--glass-edge); transform: rotate(-2deg); }
.yen svg { color: #b07a00; width: 17px; height: 17px; }

/* ---------- цель ---------- */
.target { top: 18px; min-width: 330px; padding: 8px 18px 10px; }
.target::before { content: 'ЦЕЛЬ'; position: absolute; left: 14px; top: -10px; padding: 1px 12px; font: 700 11px var(--f-x); letter-spacing: 1px; color: #fff; background: var(--pink); clip-path: var(--ribbon); }
.target b { font: 700 14px var(--f-x); }
.target .bar { height: 13px; margin-top: 5px; }

/* ---------- мини-карта, задания, добыча ---------- */
.minimap { right: 20px; top: 20px; width: 188px; height: 188px; border: 5px solid #fff; box-shadow: 0 0 0 3px var(--pink-2), 0 0 0 6px var(--sos), var(--shadow); }
.minimap .zn { bottom: 12px; font: 800 11px var(--f-d); }
.questtrack { right: 18px; top: 232px; width: 270px; padding: 16px 14px 10px; }
.questtrack h4 { position: absolute; left: 12px; top: -11px; margin: 0; padding: 2px 14px; font: 700 11px var(--f-x); letter-spacing: 1px; text-transform: uppercase; color: #fff; background: var(--pink); clip-path: var(--ribbon); }
.questtrack .qi { padding-left: 16px; position: relative; }
.questtrack .qi::before { content: '★'; position: absolute; left: 0; top: 0; color: var(--sos); text-shadow: 0 0 1px #b07a00; font-size: 12px; }
.questtrack .qi b { font: 800 13px var(--f-d); }
.lootfeed { top: auto; bottom: 166px; right: 18px; }
.lootfeed div { background: var(--glass); color: var(--hud-ink); border: 1px solid #fff; box-shadow: var(--glass-edge); border-radius: 999px; padding: 3px 12px; font: 700 12px var(--f-d); }

/* ---------- панель умений и полоса опыта ---------- */
.hotbar { bottom: 30px; gap: 6px; padding: 8px 10px; border-radius: 18px; }
.slot { width: 54px; height: 54px; border-radius: 12px; background: linear-gradient(180deg, var(--t-slot-1, #fff), var(--t-slot-2, #ffeaf3)); border: 1px solid var(--line); font-size: 26px;
  box-shadow: inset 0 -3px 0 rgba(224, 33, 110, .12), 0 2px 4px rgba(90, 20, 60, .12); transition: transform .12s, box-shadow .12s; }
.slot:hover { transform: translateY(-3px); border-color: var(--pink-2); box-shadow: inset 0 -3px 0 rgba(224, 33, 110, .2), 0 6px 14px rgba(224, 33, 110, .3); }
.slot .k { left: -1px; top: -1px; padding: 0 6px 0 5px; border-radius: 11px 0 8px 0; background: var(--pink); color: #fff; font: 800 11px/15px var(--f-d); }
.slot .n { font: 800 11px var(--f-d); color: var(--hud-ink); text-shadow: 0 0 3px var(--t-slot-1, #fff); }
.slot .cd { background: rgba(120, 20, 70, .55); }
.hotbar .sep { width: 0; border-left: 2px dotted var(--pink-3); background: none; margin: 6px 4px; }
.xpline { display: block; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: 480px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .75);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(240, 169, 30, .5), 0 4px 10px rgba(90, 20, 60, .25); }
.xpline i { position: absolute; inset: 0; border-radius: 999px; transition: clip-path .3s;
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .3) 0 5px, transparent 5px 10px), var(--xp); background-size: 14px 14px, auto; animation: stripes 1.4s linear infinite; }
.xpline span { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 2px 12px; border-radius: 999px; background: var(--ink); color: #fff; font: 700 11px var(--f-d);
  white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; }
.xpline:hover span { opacity: 1; }

/* ---------- док меню: значки, клавиша-наклейка ---------- */
.menu { right: 18px; bottom: 18px; display: grid; grid-template-columns: repeat(5, 40px); gap: 4px; padding: 6px; max-width: none; border-radius: 16px; }   /* два ряда по пять — не наезжает на панель умений */
.menu button { width: 40px; height: 40px; border-radius: 11px; border: 0; background: transparent; box-shadow: none; color: var(--pink); transition: transform .12s, background .12s; }
.menu button svg { width: 21px; height: 21px; }
.menu button:hover { transform: translateY(-3px); background: var(--pink); color: #fff; box-shadow: 0 6px 12px rgba(224, 33, 110, .35); }
.menu button kbd { display: block; position: absolute; right: -2px; bottom: -3px; min-width: 14px; padding: 0 3px; border-radius: 5px; background: var(--sos); color: #3a2400; font: 800 11px/13px var(--f-d); box-shadow: 0 1px 2px rgba(90, 20, 60, .3); }
.menu button.dot::after { right: 2px; top: 2px; width: 9px; height: 9px; border: 2px solid #fff; background: var(--pink-2); animation: ping 1.4s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255, 95, 162, .7); } 100% { box-shadow: 0 0 0 8px rgba(255, 95, 162, 0); } }

/* ---------- чат ---------- */
.chat { left: 18px; bottom: 18px; width: clamp(220px, calc(50vw - 330px), 420px); }   /* не наезжает на панель умений */
.chat .log { background: linear-gradient(0deg, rgba(40, 18, 32, .6), rgba(40, 18, 32, .25)); border-radius: 14px 14px 0 0; font: 600 13px/1.45 var(--f-b); }
.chat .log:empty { display: none; }
.chat input { border: 1px solid #fff; border-radius: 0 0 14px 14px; padding: 8px 14px; background: var(--glass); box-shadow: var(--glass-edge); font: 600 13px var(--f-b); color: var(--hud-ink); }
.chat input::placeholder { color: var(--hud-ink-2); }
.chat .log:empty + input { border-radius: 14px; }

/* ---------- надписи, тосты, наклейки ---------- */
.zone-title h2 { font: 800 46px var(--f-x); color: #fff;
  text-shadow: 0 3px 0 var(--pink), 3px 0 0 var(--pink), -3px 0 0 var(--pink), 0 -3px 0 var(--pink), 3px 3px 0 var(--pink), -3px 3px 0 var(--pink), 0 8px 18px rgba(90, 20, 60, .45); }
.zone-title p { display: inline-block; margin-top: 12px; padding: 4px 22px; font: 800 14px var(--f-d); color: #3a2400; background: var(--sos); clip-path: var(--ribbon); text-shadow: none; }
.toast { border-radius: 0; padding: 7px 26px; font: 800 14px var(--f-d); clip-path: var(--ribbon); background: linear-gradient(90deg, #3a1a2c, #5a2440); color: #fff; }
.toast.good { background: linear-gradient(90deg, #1f9a6a, #39c08a); } .toast.bad { background: linear-gradient(90deg, #c22a48, #ef4b6a); }
.toast.quest { background: linear-gradient(90deg, var(--sos), #ffb02e); color: #3a2400; }
.achpop { border: 3px solid #fff; border-radius: 16px; background: linear-gradient(135deg, var(--sos-2), var(--sos) 60%, #ffb02e); box-shadow: 0 0 0 3px var(--pink-2), var(--shadow); font: 800 15px var(--f-d); transform: translateX(-50%) rotate(-1.5deg); }
.achpop.login { background: linear-gradient(135deg, #fff, var(--pink-soft)); }
.achpop .i { font-size: 30px; filter: drop-shadow(0 2px 2px rgba(90, 20, 60, .3)); }
.bubble { border-radius: 14px; box-shadow: 0 0 0 2px var(--pink-3), var(--shadow); }

/* ---------- подсказка, контекстное меню ---------- */
.tip { border-radius: 12px; border-top: 3px solid var(--pink-2); padding: 10px 13px; max-width: 300px; }
.tip h5 { font: 700 14px var(--f-x); }
.ctx { padding: 4px; }
.ctx button { border-radius: 9px; font: 700 13px var(--f-d); }

/* ---------- диалог: как в визуальной новелле ---------- */
.dlg { bottom: 110px; width: min(860px, 72vw); padding: 22px 26px 14px; border-radius: 20px; border-left: 6px solid var(--pink-2); }
.dlg .who { left: 22px; top: -16px; border-radius: 0; padding: 4px 22px; font: 700 15px var(--f-x); clip-path: var(--ribbon); }
.dlg .txt { font: 600 16.5px/1.6 var(--f-b); }
.dlg .chs { gap: 6px; margin-top: 12px; }
.dlg .chs button { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--t-slot-1, #fff) 85%, transparent); color: var(--hud-ink); padding: 7px 12px; font: 700 14.5px var(--f-d);
  transition: transform .12s, background .12s; }
.dlg .chs button i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin: 0; background: var(--pink); color: #fff; font: 800 11px var(--f-d); }
.dlg .chs button:hover, .dlg .chs button:focus { transform: translateX(6px); background: color-mix(in srgb, var(--pink-2) 22%, transparent); border-color: var(--pink-2); }
.ctx button:hover { background: color-mix(in srgb, var(--pink-2) 25%, transparent); }

/* ---------- окна: розовая шапка в горошек, тетрадный лист ---------- */
.win { width: min(800px, 90vw); border: 4px solid #fff; border-radius: 20px; background: var(--paper);
  box-shadow: 0 0 0 3px var(--pink-2), 0 0 0 7px var(--sos), 0 30px 70px rgba(60, 10, 40, .5); }
.win header { position: relative; padding: 13px 18px; border-bottom: 0;
  background: radial-gradient(rgba(255, 255, 255, .22) 1.4px, transparent 1.6px) 0 0 / 10px 10px, linear-gradient(100deg, var(--pink), var(--pink-2)); }
.win header h3 { font: 700 19px var(--f-x); color: #fff; text-shadow: 0 2px 0 rgba(140, 10, 60, .35); }
.win header::after { content: 'SOS団'; position: absolute; right: 64px; top: 50%; transform: translateY(-50%) rotate(-8deg); padding: 1px 8px; border: 2px solid rgba(255, 255, 255, .75);
  border-radius: 6px; color: rgba(255, 255, 255, .85); font: 800 12px var(--f-x); letter-spacing: 1px; pointer-events: none; }
.win header .x { width: 32px; height: 32px; background: #fff; color: var(--pink); font-size: 19px; box-shadow: 0 2px 0 rgba(140, 10, 60, .3); transition: transform .15s; }
.win header .x:hover { transform: rotate(90deg); }
.tabs { padding: 10px 16px 0; gap: 6px; background: linear-gradient(180deg, var(--pink-soft), var(--paper)); }
.tabs button { border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; font: 800 12.5px var(--f-d); background: #fff; }
.tabs button:hover { border-color: var(--pink-2); color: var(--pink); }
.tabs button.on { background: var(--pink); border-color: var(--pink); color: #fff; box-shadow: 0 3px 8px rgba(224, 33, 110, .35); }
/* тетрадный лист: линейки и поле */
.win .body { padding: 16px 22px 18px 34px;
  background: linear-gradient(90deg, transparent 20px, rgba(255, 95, 162, .28) 20px 21px, transparent 21px), repeating-linear-gradient(180deg, transparent 0 27px, rgba(79, 123, 216, .07) 27px 28px), var(--paper); }
.win .body::-webkit-scrollbar { width: 9px; } .win .body::-webkit-scrollbar-thumb { background: var(--pink-3); border-radius: 9px; border: 2px solid var(--paper); }

/* карточки: белые, с полоской «скотча» */
.ql .q { position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; box-shadow: 0 3px 8px rgba(90, 20, 60, .08); }
.ql .q::before { content: ''; position: absolute; left: 18px; top: -6px; width: 42px; height: 12px; background: rgba(255, 210, 58, .75); transform: rotate(-4deg); border-radius: 2px; }
.ql .q.done::before { background: rgba(200, 200, 200, .6); }
.ql .q h5 { font: 700 14px var(--f-x); }
.ql .q .ch { font: 800 11px var(--f-d); }
.shopgrid { gap: 8px; }
.shopit { border: 1px solid var(--line); border-radius: 14px; padding: 6px 10px 6px 6px; box-shadow: 0 2px 6px rgba(90, 20, 60, .07); transition: transform .12s, box-shadow .12s; }
.shopit:hover { transform: translateY(-2px); border-color: var(--pink-2); box-shadow: 0 8px 16px rgba(224, 33, 110, .18); }
.shopit .ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(180deg, #fff, var(--pink-soft)); border: 1px solid var(--line); font-size: 23px; }
.shopit span { color: #b07a00; font-weight: 800; }
.statrow { border-bottom: 2px dotted var(--line); }
.statrow b { font: 800 14px var(--f-d); }
.statrow .v { font: 700 16px var(--f-x); }
.statrow button { width: 26px; height: 26px; border-radius: 9px; background: linear-gradient(180deg, var(--pink-2), var(--pink)); box-shadow: 0 2px 0 #a01048; transition: transform .1s; }
.statrow button:hover { transform: scale(1.1) rotate(-6deg); }
.kv span:nth-child(even) { font: 800 13px var(--f-d); color: var(--pink); }
select, .create input, .win input { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 6px 10px; font: 700 13px var(--f-d); color: var(--ink); }

/* ячейки вещей: светлые, подсветка редкости и «камушек» в углу */
.inv { gap: 6px; }
.cell { border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(180deg, #fff, #fff0f6); font-size: 26px; box-shadow: inset 0 -3px 0 rgba(224, 33, 110, .08); transition: transform .1s; }
.cell:hover { transform: translateY(-2px); border-color: var(--pink-2); box-shadow: 0 6px 12px rgba(224, 33, 110, .2); }
.cell.empty { background: rgba(255, 228, 239, .45); border: 1px dashed #f0bfd3; box-shadow: none; }
.cell.empty:hover { transform: none; box-shadow: none; }
.cell .n { font: 800 11px var(--f-d); text-shadow: 0 0 3px #fff; }
.cell.r1 { border-color: #5fd068; background: linear-gradient(180deg, #fff, #e9fbea); }
.cell.r2 { border-color: #4fa3ff; background: linear-gradient(180deg, #fff, #e6f2ff); }
.cell.r3 { border-color: #b26bff; background: linear-gradient(180deg, #fff, #f3e9ff); box-shadow: 0 0 8px #b26bff55; }
.cell.r4 { border-color: #ffa53a; background: linear-gradient(180deg, #fff, #fff1df); box-shadow: 0 0 10px #ffa53a66; }
.cell.r5 { border-color: #ff5fa2; background: linear-gradient(180deg, #fff, #ffe4ef); box-shadow: 0 0 12px #ff5fa288; }
.cell.r1::after, .cell.r2::after, .cell.r3::after, .cell.r4::after, .cell.r5::after { content: ''; position: absolute; right: 5px; bottom: 5px; width: 7px; height: 7px; transform: rotate(45deg); border-radius: 1px; }
.cell.r1::after { background: #5fd068; } .cell.r2::after { background: #4fa3ff; } .cell.r3::after { background: #b26bff; } .cell.r4::after { background: #ffa53a; } .cell.r5::after { background: #ff5fa2; }
.eqgrid { gap: 8px; }
.eqgrid .cell { height: 62px; }
.eqgrid .cell small { font: 800 11px var(--f-d); letter-spacing: .5px; text-transform: uppercase; color: var(--pink); }

/* кнопки: таблетки */
.btn { border-radius: 999px; font: 700 13px var(--f-x); padding: 10px 22px; background: linear-gradient(180deg, var(--pink-2), var(--pink)); box-shadow: 0 3px 0 #a01048, 0 6px 14px rgba(224, 33, 110, .3); transition: transform .1s; }
.btn:hover { transform: translateY(-1px); }
.btn.ghost { background: #fff; border: 1.5px solid var(--pink-3); box-shadow: 0 2px 0 rgba(224, 33, 110, .15); }
.btn.sm { padding: 5px 13px; font: 800 12px var(--f-d); letter-spacing: 0; }

/* сумка, полосы, таланты */
.sellconf { border-radius: 14px; border: 1px dashed var(--pink-2); background: #fff; }
.pbar { height: 9px; border-radius: 999px; } .pbar i { border-radius: 999px; }
.tal .tl { border-width: 1px; border-radius: 14px; box-shadow: 0 2px 6px rgba(90, 20, 60, .06); }
.tal .br h4 { font: 700 14px var(--f-x); }

/* ---------- создание героини ---------- */
.create .box { border: 4px solid #fff; border-radius: 24px; background: radial-gradient(rgba(255, 95, 162, .08) 1.4px, transparent 1.6px) 0 0 / 14px 14px, #fffafc;
  box-shadow: 0 0 0 3px var(--pink-2), 0 0 0 7px rgba(255, 210, 58, .8), 0 30px 70px rgba(60, 10, 40, .5); }
.create h1 { font: 800 36px var(--f-x); }
.hero { border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 3px 10px rgba(90, 20, 60, .08); transition: transform .15s; }
.hero:hover { transform: translateY(-3px) rotate(-.5deg); }
.hero.on { border-color: var(--pink-2); box-shadow: 0 0 0 3px var(--pink-soft), 0 10px 22px rgba(224, 33, 110, .25); }
.hero h4 { font: 700 16px var(--f-x); }
.hero .dot { border: 3px solid #fff; box-shadow: 0 0 0 2px var(--sos); }
.death h2 { font: 800 46px var(--f-x); }

/* ---------- новое на экране: баффы, цель, отряд ---------- */
.buffs { gap: 6px; margin-top: 2px; min-height: 0; }
.buffs .bf { width: 28px; height: 28px; font-size: 14px; box-shadow: 0 2px 4px rgba(90, 20, 60, .2); }
.buffs span:not(.bf) { border-radius: 999px; padding: 0 8px; background: #fff; }
.target .th { gap: 8px; }
.target .lvl { height: 22px; font: 700 11px/22px var(--f-x); border-radius: 7px; box-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.target .tags i { border-radius: 999px; padding: 0 8px; }
.target.boss { box-shadow: 0 0 0 2px var(--sos), var(--glass-edge); }
.target.boss .bar { height: 16px; }
.partyf { left: 22px; top: 136px; width: 220px; gap: 6px; }
.partyf .pf { background: var(--glass); backdrop-filter: blur(8px); color: var(--hud-ink); border: 1px solid color-mix(in srgb, var(--t-glass-1, #fff) 60%, #fff); border-radius: 12px; box-shadow: var(--glass-edge); padding: 5px 10px 6px; }
.partyf .pf b { font: 600 12px var(--f-x); word-spacing: .12em; }
.partyf .pf em { min-width: 20px; height: 18px; border-radius: 6px; background: var(--sos); color: #3a2400; text-align: center; font: 700 11px/18px var(--f-x); }
.partyf .pf .bar { height: 7px; border-radius: 6px; }
.questtrack .qi { padding: 4px 6px 4px 18px; margin: 0 -6px 4px; border-radius: 10px; transition: background .12s; }
.questtrack .qi:hover { background: rgba(255, 95, 162, .12); }
.questtrack .qi::before { left: 4px; top: 4px; }
.questtrack .qp { height: 5px; border-radius: 999px; }
.hud-me.low { animation: lowhp-d 1s ease-in-out infinite; }
@keyframes lowhp-d { 50% { box-shadow: 0 0 0 3px #f0435c, 0 0 26px rgba(240, 67, 92, .75), var(--glass-edge); } }

.chat .ch { border: 1px solid #fff; border-right: 0; border-radius: 0 0 0 14px; background: var(--glass); box-shadow: var(--glass-edge); }
.chat .say input { border-radius: 0 0 14px 0; }
.chat .log:empty + .say input { border-radius: 0 14px 14px 0; }
.chat .log:empty + .say .ch { border-radius: 14px 0 0 14px; }

/* ---------- окно «Умения» 2.0 (компьютер) ---------- */
.skbars { background: var(--glass); border: 1px solid #fff; box-shadow: 0 6px 18px rgba(90, 20, 60, .12); }
.skcard { border: 1px solid var(--line); box-shadow: 0 2px 0 rgba(224, 33, 110, .06); transition: transform .1s, box-shadow .1s; }
.skcard.own:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(224, 33, 110, .14); border-color: var(--pink-2); }
.skcard .skh b { font-family: var(--f-x); font-size: 13px; }
.chip.on, .skcard .btn.on { box-shadow: 0 3px 0 #a01048; }
/* меню: подписи под значками */
.menu { max-width: 420px; }
.menu button { width: 56px; height: 52px; display: grid; place-items: center; align-content: center; gap: 1px; }
.menu { grid-template-columns: repeat(5, 52px); }   /* подписи 11 px (не мельче): кнопки чуть шире, длинные слова — в две строки */
.menu button { width: 52px; }
.menu button .lb { display: block; max-width: 100%; font: 800 11px var(--f-d); line-height: 1; letter-spacing: -.2px; white-space: normal; hyphens: manual; }
.menu button kbd { right: 1px; bottom: auto; top: 1px; }
/* размер интерфейса (ui/prefs.js, zoom на #ui в game.css): окна по ширине экрана — делим на масштаб */
.win { width: min(800px, calc(90vw / var(--ui-scale, 1))); }
.dlg { width: min(860px, calc(72vw / var(--ui-scale, 1))); }
.chat { width: clamp(220px, calc(50vw / var(--ui-scale, 1) - 330px), 420px); }