/* ── Персонаж ────────────────────────────────────────────────
   Left: a fixed-height panel — tabs over the 9 × 4 inventory, a hint line and «Выбросить».
   Right: the player on the glass. The game draws the model into .char-model; the armour column lines up with the
   body (head, chest, legs, feet at vanilla proportions), the offhand stands at the feet on the other side.
   Slots are sized in rem; the icon inside them is set from JS to a whole-number pixel scale: --icon is the icon box,
   --px one pixel of a 16 × 16 item (count, durability bar and silhouettes are laid out in those units). */
.char {
  --slot: 4.5rem;
  --slot-gap: 0.15rem;
  --hot-gap: 0.9rem;
  --grid-w: calc(var(--slot) * 9 + var(--slot-gap) * 8);
  --grid-h: calc(var(--slot) * 4 + var(--slot-gap) * 2 + var(--hot-gap));
  --foot-h: 3.75rem;
  --model-h: 22.5rem;
  --icon: 32px;
  --px: 2px;
  display: grid;
  grid-template-columns: auto minmax(20rem, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

/* ── panel & tabs ─────────────────────────────────────────── */
.char-panel { width: calc(var(--grid-w) + 3rem); padding: 0.375rem 1.5rem 1.25rem; display: flex; flex-direction: column; }
.char-tabs { position: relative; display: flex; gap: 1.75rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.char-tab {
  position: relative;
  height: 3.125rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-3);
  font-size: 0.875rem;
  font-weight: 500;
  transition: color var(--t-fast);
}
.char-tab::before { content: ""; position: absolute; inset: 0 -0.7rem; }
.char-tab:hover { color: var(--text-2); }
.char-tab:active { color: var(--text); }
.char-tab[aria-selected="true"] { color: var(--text); }
.char-tab:focus-visible { outline-offset: -3px; }
.char-tab-dot { position: absolute; top: 0.95rem; right: -0.6rem; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--lvl-b); box-shadow: 0 0 0 0.2rem rgba(187, 149, 255, 0.18); }
.char-tab-mark {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 1px;
  height: 2px;
  background: var(--text);
  transform-origin: 0 0;
  transform: translateX(var(--x, 0)) scaleX(var(--w, 0));
  transition: transform 0.26s var(--ease);
  pointer-events: none;
}
.char-pane { height: calc(var(--grid-h) + var(--foot-h)); min-height: 0; display: flex; flex-direction: column; }
.char-pane[data-pane="skills"], .char-pane[data-pane="path"] { overflow-y: auto; margin-right: -0.75rem; padding-right: 0.75rem; }

/* ── the grid ─────────────────────────────────────────────── */
.inv { display: flex; flex-direction: column; gap: var(--hot-gap); -webkit-user-select: none; user-select: none; }
.inv-main, .inv-hot { display: grid; grid-template-columns: repeat(9, var(--slot)); gap: var(--slot-gap); }

.slot {
  position: relative;
  width: var(--slot);
  height: var(--slot);
  display: grid;
  place-items: center;
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.slot > * { grid-area: 1 / 1; }
.slot.is-filled { background: rgba(255, 255, 255, 0.07); }
/* hover is instant, like the game */
.slot:hover { background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.char.is-view-only .slot:hover { background: rgba(255, 255, 255, 0.1); }
.slot:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: 0.3rem; }
.slot.is-selected { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.58); }
.slot.is-drag { background: rgba(255, 255, 255, 0.15); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.slot.is-dim { opacity: 0.3; }
.slot.is-target { box-shadow: inset 0 0 0 1px rgba(143, 163, 255, 0.9), 0 0 0 3px rgba(143, 163, 255, 0.16); }
.slot.is-flash::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, 0.3); pointer-events: none; animation: slot-flash 0.18s ease-out both; }
.slot.is-reject { box-shadow: inset 0 0 0 1px var(--ruby); animation: slot-shake 0.12s linear; }
@keyframes slot-flash { from { opacity: 1; } to { opacity: 0; } }
@keyframes slot-shake { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }

.slot-sil { display: grid; place-items: center; pointer-events: none; }
.sil { width: var(--icon); height: var(--icon); fill: rgba(255, 255, 255, 0.09); shape-rendering: crispEdges; }
.slot.is-filled .slot-sil { display: none; }
.slot.is-target .sil { fill: rgba(143, 163, 255, 0.4); }
.slot-key { align-self: start; justify-self: start; margin: 0.2rem 0 0 0.3rem; font-size: 0.6875rem; font-weight: 600; line-height: 1; color: var(--text-3); opacity: 0; transition: opacity var(--t-fast); pointer-events: none; }
.inv:hover .slot-key, .inv:focus-within .slot-key { opacity: 1; }

/* ── a stack, drawn like the game draws it ────────────────── */
.stack { position: relative; width: var(--icon); height: var(--icon); display: grid; place-items: center; pointer-events: none; }
.stack > * { grid-area: 1 / 1; }
.stack-glyph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--text-2); }
.stack-glyph .ic { width: 62%; height: 62%; stroke-width: 1.6; }
.stack.has-img .stack-glyph { display: none; }
.stack-img { width: var(--icon); height: var(--icon); image-rendering: pixelated; }
/* enchant glint: a violet band clipped to the icon's own pixels, added as light */
.stack-glint {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  mix-blend-mode: plus-lighter;
  -webkit-mask-image: var(--mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 62% 62%;
}
.stack.has-img .stack-glint { -webkit-mask-size: 100% 100%; }
/* added light vanishes on a white line glyph: over the fallback the band is painted instead */
.stack:not(.has-img) .stack-glint { mix-blend-mode: normal; }
.stack-glint::before {
  content: "";
  position: absolute;
  left: -100%;
  top: -100%;
  width: 300%;
  height: 300%;
  background: repeating-linear-gradient(90deg, transparent 0 8%, rgba(136, 76, 255, 0.5) 13%, rgba(214, 178, 255, 0.85) 16.667%, rgba(136, 76, 255, 0.5) 20.3%, transparent 25.3% 33.333%);
  transform: rotate(-35deg);
  animation: stack-glint 4.2s linear infinite;
  animation-delay: var(--glint-delay, 0s);
}
@keyframes stack-glint {
  from { transform: rotate(-35deg) translateX(0); }
  to { transform: rotate(-35deg) translateX(-33.333%); }
}
html[data-motion="off"] .stack-glint::before { animation: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion="on"]) .stack-glint::before { animation: none; } }
/* durability: 13 × 2 black at (2, 13), the top row coloured by what is left */
.stack-dur { position: absolute; left: calc(var(--px) * 2); top: calc(var(--px) * 13); width: calc(var(--px) * 13); height: calc(var(--px) * 2); background: #000; }
.stack-dur > i { display: block; width: calc(var(--px) * var(--step, 13)); height: var(--px); background: hsl(var(--hue, 120deg) 100% 50%); }
/* count: bottom-right in the game's digits, overhanging the icon by one pixel like the game */
.stack-count { position: absolute; right: calc(var(--px) * -1); top: calc(var(--px) * 9); line-height: 0; }
.pxn { display: block; width: calc(var(--w) * var(--px)); height: calc(var(--px) * 8); shape-rendering: crispEdges; }
/* beside a line glyph the digits step down one scale and sit in the corner */
.stack:not(.has-img) .stack-count { top: auto; bottom: calc(var(--px) * -1); }
.stack:not(.has-img) .pxn { width: calc(var(--w) * var(--px-glyph, var(--px))); height: calc(var(--px-glyph, var(--px)) * 8); }

/* ── footer: hints and «Выбросить» ────────────────────────── */
.inv-foot { display: flex; align-items: center; gap: 1rem; height: var(--foot-h); padding-top: 0.625rem; margin-top: auto; }
.inv-hint { flex: 1; min-width: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; font-size: 0.75rem; line-height: 1.3; color: var(--text-3); }
.inv-hint-part { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.inv-hint kbd { font: 600 0.6875rem/1 var(--font); padding: 0.2rem 0.38rem; border-radius: 0.3rem; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.035); color: var(--text-2); }
.inv-note { color: var(--text-2); text-wrap: pretty; }
.inv-vanilla { flex: none; display: inline-flex; align-items: center; gap: 0.45rem; height: 3.125rem; padding: 0 0.95rem; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font: 500 0.8125rem/1 var(--font); cursor: pointer; }
.inv-vanilla:hover { background: var(--surface-2); color: var(--text); }
.inv-vanilla .ic { width: 1.05rem; height: 1.05rem; }
.inv-vanilla[hidden] { display: none; }
.inv-drop {
  flex: none;
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 0.6rem;
  height: 3.125rem;
  padding: 0 1rem 0 0.85rem;
  border-radius: var(--r-md);
  border: 1px dashed var(--line-2);
  background: transparent;
  color: var(--text-3);
  text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), opacity var(--t-fast), transform var(--t-fast);
}
.inv-drop .ic { grid-row: span 2; width: 1.15rem; height: 1.15rem; }
.inv-drop span { font-size: 0.8125rem; font-weight: 500; line-height: 1.15; }
.inv-drop small { font-size: 0.6875rem; line-height: 1.15; color: var(--text-4); }
.inv-drop[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.char.is-carrying .inv-drop[aria-disabled="false"] { border-style: solid; border-color: rgba(255, 255, 255, 0.24); color: var(--text); }
.char.is-carrying .inv-drop[aria-disabled="false"] small { color: var(--text-3); }
.char.is-carrying .inv-drop[aria-disabled="false"]:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.42); }
.char.is-carrying .inv-drop[aria-disabled="false"]:active { transform: scale(0.97); }
.char.is-view-only .inv-drop { display: none; }

/* ── stage: the player on the glass ───────────────────────── */
.char-stage { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 0 0 0.5rem; }
.char-figure { position: relative; display: grid; grid-template-columns: var(--slot) minmax(9.5rem, 13.5rem) var(--slot); column-gap: 1.25rem; height: var(--model-h); }
/* armour centres at 23.6 % (head) … 88 % (feet) of the model box: where the game's model has those body parts */
.char-armor { display: flex; flex-direction: column; gap: max(0.25rem, calc(var(--model-h) * 0.2147 - var(--slot))); padding-top: max(0rem, calc(var(--model-h) * 0.236 - var(--slot) / 2)); }
.char-hand { padding-top: calc(var(--model-h) * 0.88 - var(--slot) / 2); }
.char-model { position: relative; z-index: 1; height: var(--model-h); }
.char-glow { position: absolute; inset: 4% -22% 14%; background: radial-gradient(50% 50% at 50% 46%, rgba(255, 255, 255, 0.075), transparent 72%); pointer-events: none; }
/* a soft pool of light on the glass with the player's shadow in it */
.char-floor { position: absolute; left: 50%; top: calc(var(--model-h) * 0.91); width: 13rem; height: 2.4rem; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.34) 38%, rgba(255, 255, 255, 0.035) 62%, transparent); pointer-events: none; }

.standin { position: absolute; left: 50%; top: 14%; height: 77%; width: auto; aspect-ratio: 1 / 2; transform: translateX(-50%); overflow: visible; shape-rendering: crispEdges; }
.standin .sk { fill: rgba(255, 255, 255, 0.075); }
.standin .sk:first-child { fill: rgba(255, 255, 255, 0.11); }
.standin .sk.arm { fill: rgba(255, 255, 255, 0.055); }
.standin .wear { fill: rgba(214, 222, 240, 0.2); opacity: 0; transition: opacity var(--t-med); }
.char-model.wear-head .wear.head, .char-model.wear-chest .wear.chest, .char-model.wear-legs .wear.legs, .char-model.wear-feet .wear.feet { opacity: 1; }
.char-model.is-drawn .standin { display: none; }

.char-id { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; max-width: 100%; min-width: 0; text-align: center; }
.char-name { max-width: 100%; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.char-role { font-size: 0.875rem; color: var(--text-2); }
.char-level { position: relative; display: grid; grid-template-columns: auto 9rem; align-items: center; column-gap: 0.75rem; margin-top: 0.55rem; padding: 0.2rem 0.4rem; border-radius: var(--r-sm); font-size: 0.75rem; color: var(--text-3); }
.char-level-num { font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
/* the numbers appear under the bar on hover without taking room when hidden */
.char-level-more { position: absolute; left: 0; right: 0; top: 100%; padding-top: 0.2rem; white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity var(--t-fast); pointer-events: none; }
.char-level:hover .char-level-more, .char-level:focus-visible .char-level-more { opacity: 1; }

/* one thin accent meter for every progress on this screen */
.meter { position: relative; display: block; height: 0.25rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.meter > i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--lvl-a), var(--lvl-b)); clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0 round 999px); transition: clip-path 0.7s var(--ease); }

/* ── Навыки ───────────────────────────────────────────────── */
.skills { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.skill {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  grid-template-areas: "ico head lvl" "ico bar bar";
  column-gap: 1rem;
  align-items: center;
  min-height: 3.35rem;
  padding: 0.45rem 0.75rem 0.5rem 0.45rem;
  border-radius: 0.9rem;
  transition: background var(--t-fast);
}
.skill:hover, .skill:focus-visible { background: rgba(255, 255, 255, 0.045); }
.skill-ico { grid-area: ico; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 0.45rem; background: var(--surface-2); color: var(--text-2); }
.skill-ico .ic { width: 1.3rem; height: 1.3rem; stroke-width: 1.6; }
.skill-head { grid-area: head; min-width: 0; display: flex; align-items: baseline; gap: 0.9rem; }
.skill-name { flex: none; font-size: 0.875rem; font-weight: 500; }
/* the raw statistic shows on hover, in the free space of the same line */
.skill-more { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; color: var(--text-3); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity var(--t-fast); }
.skill:hover .skill-more, .skill:focus-visible .skill-more { opacity: 1; }
.skill-lvl { grid-area: lvl; display: flex; align-items: center; gap: 0.4rem; }
.skill-star { width: 0.85rem; height: 0.85rem; color: var(--gold); fill: currentColor; }
.skill-bar { grid-area: bar; margin-top: 0.45rem; }
.skill-bar.is-segmented::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--n) - 1px), rgba(12, 14, 20, 0.9) calc(100% / var(--n) - 1px) calc(100% / var(--n))); pointer-events: none; }
.skill.is-new { grid-template-areas: "ico head head" "ico hint hint"; }
.skill.is-new .skill-ico { opacity: 0.5; }
.skill.is-new .skill-name { color: var(--text-2); }
.skill-hint { grid-area: hint; margin-top: 0.15rem; font-size: 0.75rem; color: var(--text-3); text-wrap: pretty; }
.char-quiet { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 2rem; text-align: center; color: var(--text-3); }
.char-quiet p { max-width: 24rem; font-size: 0.8125rem; line-height: 1.5; text-wrap: balance; }

/* ── Путь ─────────────────────────────────────────────────── */
.path { display: flex; flex-direction: column; gap: 1.1rem; padding-bottom: 0.25rem; }
.path-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.path-title { margin-bottom: 0.55rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); }
.path-facts { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: space-between; gap: 0.5rem 1.5rem; }
.path-facts div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.path-facts dt { font-size: 0.75rem; color: var(--text-3); white-space: nowrap; }
.path-facts dd { font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.path-jobs, .path-events { list-style: none; margin: 0; padding: 0; }
.path-job { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto 7rem; align-items: center; column-gap: 0.9rem; padding: 0.5rem 0.25rem; border-top: 1px solid var(--line); }
.path-job:first-child { border-top: 0; }
.path-job-ico { color: var(--text-3); display: grid; }
.path-job-name { font-size: 0.875rem; font-weight: 500; }
.path-job-rank { display: grid; justify-items: end; font-size: 0.8125rem; color: var(--text-2); }
.path-job-rank > * { grid-area: 1 / 1; transition: opacity var(--t-fast); }
.path-job-more { font-size: 0.75rem; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; }
.path-job:hover .path-job-rank > :first-child, .path-job:focus-visible .path-job-rank > :first-child { opacity: 0; }
.path-job:hover .path-job-more, .path-job:focus-visible .path-job-more { opacity: 1; }
.path-job-state { grid-column: 3 / -1; justify-self: end; font-size: 0.75rem; color: var(--text-4); }
.path-job.is-idle .path-job-name { color: var(--text-2); }
.path-events li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.9rem; padding: 0.4rem 0; border-top: 1px solid var(--line); font-size: 0.8125rem; }
.path-events li:first-child { border-top: 0; }
.path-events time { padding-top: 0.05rem; font-size: 0.75rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.path-empty { font-size: 0.75rem; color: var(--text-3); text-wrap: pretty; }

/* ── tooltip & carried stack (fixed layers on body) ───────── */
.itip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  min-width: 9rem;
  max-width: 21rem;
  padding: 0.6rem 0.8rem 0.65rem;
  border-radius: 0.6rem;
  background: rgba(14, 12, 22, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-pop);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text);
  pointer-events: none;
  will-change: transform;
}
.itip::before { content: ""; position: absolute; left: 0.8rem; right: 0.8rem; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--rarity, #fff), transparent); opacity: 0.75; }
.itip-name { font-size: 0.875rem; font-weight: 600; }
.itip-body { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.itip-line { text-wrap: pretty; }
.itip-gap { height: 0.5rem; }
.itip-wear { margin-top: 0.1rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.itip-more { margin-top: 0.45rem; font-size: 0.6875rem; color: var(--text-4); }
.carry { position: fixed; left: 0; top: 0; z-index: 90; width: var(--icon, 32px); height: var(--icon, 32px); pointer-events: none; will-change: transform; filter: drop-shadow(0 0.35rem 0.5rem rgba(0, 0, 0, 0.45)); }

@media (max-width: 1100px) {
  .char { grid-template-columns: minmax(0, 1fr); }
  .char-panel { justify-self: start; }
  .char-stage { padding: 1rem 0 0.5rem; }
}