and identity columns stay sticky inside the box; the frozen-column divider is
an overlay (.sticky-frame) drawn in the non-scrolling .creeps-page so Chrome
keeps repainting it (box-shadow on position:sticky cells drops mid-scroll).
Mana Items has no .creeps-scroll → it page-scrolls normally. */
body:has(.creeps-scroll) { overflow: hidden; }
body:has(.creeps-scroll) .creeps-page { padding-top: 0; padding-bottom: 12px; }
.creeps-scroll {
overflow: auto;
width: 100%;
position: sticky;
top: var(--site-nav-h, 96px);
max-height: calc(100vh - var(--site-nav-h, 96px) - 24px);
contain: paint;
will-change: scroll-position;
/* Always-visible scrollbars across every Materials table (Neutral Creeps,
Mana Items, Hero Stats, etc). Without this, Hero Stats' Expanded view
overflows horizontally but the native scrollbar can be hidden on
overlay-scroll setups (macOS, some Linux/Win configurations) — the
scroll line is then invisible. Custom thin scrollbar keeps the line
visible everywhere and matches the site's dark theme. */
scrollbar-width: thin;
scrollbar-color: rgba(139, 148, 158, 0.45) rgba(13, 17, 23, 0.6);
}
.creeps-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.creeps-scroll::-webkit-scrollbar-track {
background: rgba(13, 17, 23, 0.6);
}
.creeps-scroll::-webkit-scrollbar-thumb {
background: rgba(139, 148, 158, 0.45);
border-radius: 5px;
border: 2px solid rgba(13, 17, 23, 0.6);
}
.creeps-scroll::-webkit-scrollbar-thumb:hover {
background: rgba(227, 196, 106, 0.7);
}
.creeps-scroll::-webkit-scrollbar-corner {
background: rgba(13, 17, 23, 0.6);
}
.creeps-table {
/* width:max-content + min-width:100% = stretch evenly to fill the container
when content is narrow (Standard view — no empty strip on the right), but
grow to content width and scroll horizontally when wide (Expanded view). */
width: max-content;
min-width: 100%;
/* table-layout: auto lets the browser size each column to the widest
content (header or cell) — no manual width hints. Every cell is
centered horizontally, so visual alignment stays clean across the
auto-sized columns. */
table-layout: auto;
/* `collapse` — significantly faster than `separate` on a wide table
(~1600 cells on Creeps page). The sticky-bleed regression `separate`
was meant to fix is handled below via a full-area `box-shadow: inset
0 0 0 9999px var(--sticky-bg)` on sticky cells: the inset draws on
the cell's paint layer (above the table's collapsed-border layer)
and fills the whole inner area, masking any seam during scroll. */
border-collapse: collapse;
font-size: 11.5px;
color: #c9d1d9;
font-variant-numeric: tabular-nums;
text-align: center;
}
.creeps-table th,
.creeps-table td {
text-align: center;
vertical-align: middle;
}
/* Merged Ур. cell — when a level spans multiple rows via rowspan, the
single cell shows the level number vertically centered against the
group's full height. */
.creeps-table .lvl-cell {
font-weight: 600;
color: #79c0ff;
background: rgba(170, 220, 240, 0.05);
border-right: 1px solid rgba(170, 220, 240, 0.18);
}
/* Identity columns (Ур. / icon / Юнит) pinned to the left on horizontal
scroll. scripts.js sets per-cell `left`; we provide position:sticky +
an opaque background so scrolled cells pass underneath cleanly. */
.creeps-table .sticky-col {
position: sticky;
z-index: 3;
--sticky-bg: #0e1217;
background: var(--sticky-bg);
/* Full-area inset shadow paints over any collapsed-border seam that
would otherwise bleed through this cell during horizontal scroll. */
box-shadow: inset 0 0 0 9999px var(--sticky-bg);
}
.creeps-table thead .sticky-col {
z-index: 51; /* corner cells: above both sticky axes + hover-zoom */
}
.creeps-table tbody tr:hover .sticky-col {
--sticky-bg: #161d27; /* match the row-hover tint, stay opaque */
}
.creeps-table .lvl-cell.sticky-col {
--sticky-bg: #11161d; /* keep the level cell's faint blue-tint readable */
}
/* Overlay frame outlining the pinned identity block while scrolled.
Drawn as a separate absolutely-positioned element in .creeps-page
(which does NOT horizontally scroll), so it sidesteps the Chrome bug
where box-shadow/border on position:sticky cells stops repainting
mid-scroll. scripts.js sets left/top/width/height and toggles
.visible based on the scroll container's scrollLeft. */
.creeps-page { position: relative; }
/* Frozen-pane dividers (overlays in the non-scrolling .creeps-page so their
shadows keep repainting — Chrome drops box-shadow on position:sticky cells
mid-scroll). .sticky-frame = vertical edge at the RIGHT of the pinned
lvl/unit block (horizontal scroll); .sticky-frame-top = horizontal edge
under the header (vertical scroll). Neither boxes the pinned cells. */
.sticky-frame, .sticky-frame-top {
/* Absolute inside the non-scrolling .creeps-page so the divider's box-shadow
keeps repainting (Chrome drops box-shadow on position:sticky cells
mid-scroll). scripts.js sets left/top/width/height from the box scroll. */
position: absolute;
display: none;
pointer-events: none;
z-index: 7; /* above body + header sticky cells, below the
hover-zoomed icon (z-index: 9) */
}
.sticky-frame {
border-left: 2px solid rgba(120, 200, 235, 0.85);
box-shadow: 6px 0 12px -2px rgba(0, 0, 0, 0.7);
}
.sticky-frame-top {
border-top: 2px solid rgba(120, 200, 235, 0.85);
box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.7);
}
.sticky-frame.visible, .sticky-frame-top.visible { display: block; }
/* Dedicated icon column — fixed-size portrait, centered. Vertical-align
middle on the parent keeps the image baseline-aligned with the
sibling cells without flexbox (which previously made the wildkin row
look "split" because flex baselines diverged from table baselines). */
.creeps-table .creep-icon-cell {
text-align: center;
padding: 2px 4px;
vertical-align: middle;
}
/* Raise the icon cell on hover so the zoomed portrait sits above the other
body cells (the cell is already position:sticky, which establishes a
stacking context — bump its z-index rather than the inner ![]() ). Stays
BELOW the pinned header (z 10/11) so a hovered top row never covers it. */
.creeps-table .creep-icon-cell:hover {
z-index: 9;
}
/* Attack Range melee/ranged marker — a small frosted-glass rounded block
holding the icon, to the right of the number. */
/* Attack Range cell: number in a fixed-width box so the icon badge always
lands at the same x regardless of digit count. */
.creeps-table .col-attack_range,
.mr-table.hs-table .hs-col-range {
white-space: nowrap;
}
.creeps-table .atk-num,
.mr-table.hs-table .atk-num {
display: inline-block;
min-width: 30px;
text-align: right;
vertical-align: middle;
}
.creeps-table .atk-badge,
.mr-table.hs-table .atk-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px; /* fixed block — every badge is identical size */
height: 18px;
box-sizing: border-box;
margin-left: 6px;
border-radius: 5px;
/* Frosted glass without backdrop-filter (blur is GPU-heavy ×40 cells and
caused scroll jank) — a soft translucent gradient instead. */
background: linear-gradient(rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
border: 1px solid rgba(255, 255, 255, 0.14);
vertical-align: middle;
}
.creeps-table .atk-badge img,
.mr-table.hs-table .atk-badge img {
width: 12px;
height: 12px;
object-fit: contain;
display: block;
opacity: 0.9;
}
/* Header centre tabs (Main / Patch Reader / Calendar / Materials) — laid out
in the middle grid column of .nav-inner, so they're always centred between
brand (left) and the picker / context block (right) without overlapping
either. Each tab is a 48px-tall pill matching the version picker height,
so the row sits on one baseline. Font matches the brand block. */
.nav-tabs {
display: flex;
gap: 8px;
align-items: center;
justify-self: center;
}
.nav-tab {
font-family: 'Jersey 10', 'Courier New', monospace;
font-size: 18px;
letter-spacing: 1px;
line-height: 1;
color: #d2d9e0;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
text-decoration: none;
height: 38px; /* matches the version picker on patch pages */
padding: 0 14px;
display: inline-flex;
align-items: center;
border-radius: 0;
background:
linear-gradient(180deg,
rgba(255, 244, 209, 0.025) 0%,
rgba(255, 244, 209, 0.0) 100%),
rgba(28, 32, 38, 0.84);
border: 1px solid rgba(122, 131, 144, 0.22);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.035),
inset 0 -1px 0 rgba(0, 0, 0, 0.38);
transition: background 0.15s ease, color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px,
100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%,
0 calc(100% - 2px), 0 2px);
}
.nav-tab:hover {
color: #ffffff;
background:
linear-gradient(180deg,
rgba(227, 196, 106, 0.05) 0%,
rgba(227, 196, 106, 0.015) 100%),
rgba(32, 36, 43, 0.96);
border-color: rgba(163, 135, 73, 0.24);
}
/* Active tab — gold "sikle" text colour + a pressed-into-the-header look via
a darker recessed background and an inset top shadow. */
.nav-tab.active {
color: #e3c46a;
background:
linear-gradient(180deg,
rgba(227, 196, 106, 0.065) 0%,
rgba(227, 196, 106, 0.018) 100%),
rgba(17, 20, 25, 0.98);
border-color: rgba(227, 196, 106, 0.28);
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 244, 209, 0.05),
inset 0 -1px 0 rgba(255, 255, 255, 0.03);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}
/* Materials sub-tabs — flat row of three browser-tab pills, hung BELOW the
main header on a thin bar (so the header itself stays compact). */
.materials-subnav {
background: #11161d;
border-bottom: 1px solid rgba(170, 220, 240, 0.18);
width: 100%;
}
.materials-subnav-inner {
padding: 0 10px; /* flush-left, same left padding as the brand block */
display: flex;
justify-content: flex-start;
align-items: flex-end;
min-height: 36px;
}
.materials-subnav-links {
display: flex;
gap: 4px;
align-items: flex-end;
min-width: 0;
}
/* When the sub-tab bar sits INSIDE the table scroll box (Neutral Creeps /
Neutral Abilities), it scrolls away vertically with the table but stays
pinned to the left edge during horizontal scroll — same treatment as the
blurb + toolbar. On Mana Items it stays in the page header and scrolls away
via the page itself. */
.creeps-scroll > .materials-subnav {
position: sticky;
left: 0;
/* Above sticky headers and hovered dynamics cells. The bar scrolls up out of
view before the header pins, so the higher z doesn't cause lasting overlap. */
z-index: 120;
}
.nav-subtab {
font-size: 13px;
font-weight: 600;
color: #9fb0c0;
text-decoration: none;
padding: 7px 16px;
border: 1px solid transparent;
border-bottom: none;
border-radius: 7px 7px 0 0; /* rounded top — sits on the subnav's bottom border */
margin-bottom: -1px; /* overlap the 1px bottom border */
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
display: inline-flex;
align-items: center;
gap: 0;
}
.nav-subtab:hover { color: #e6edf3; background: rgba(48, 54, 61, 0.45); }
.nav-subtab.active {
color: #e3c46a;
background: #0a0e13; /* matches the page background → tab merges into page */
border-color: rgba(170, 220, 240, 0.18);
}
.nav-subtab-label { color: inherit; }
/* ---- Grouped sub-nav dropdowns (Creeps ▾ / Items ▾ / Heroes ▾) ---- */
.nav-subgroup { position: relative; display: inline-flex; align-items: flex-end; }
.nav-subtab-group { cursor: pointer; }
.nav-caret { margin-left: 6px; font-size: 9px; opacity: 0.75; }
.nav-submenu {
position: absolute;
top: 100%;
left: 0;
min-width: 184px;
background: #11161d;
border: 1px solid rgba(170, 220, 240, 0.20);
border-radius: 0 8px 8px 8px;
padding: 5px;
display: flex;
flex-direction: column;
gap: 2px;
/* Above the submenu's own stacking context; the bar is lifted so this paints
over the table, sticky header and dynamics cells. */
z-index: 125;
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55);
opacity: 0;
visibility: hidden;
transform: translateY(5px);
transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
/* Child combinator `>` so a nested flyout (a .nav-submenu deeper inside) does
NOT open just because the outer group is hovered — only its OWN nested
subgroup hover opens it. `.is-open` is the touch-device tap-toggle class
that scripts.js adds when the user taps a group trigger (first tap = open,
second tap = follow link). */
.nav-subgroup:hover > .nav-submenu,
.nav-subgroup:focus-within > .nav-submenu,
.nav-subgroup.is-open > .nav-submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-subitem {
font-size: 12.5px;
font-weight: 600;
color: #9fb0c0;
text-decoration: none;
padding: 7px 12px;
border-radius: 5px;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
transition: background 0.12s ease, color 0.12s ease;
}
.nav-subitem:hover { color: #e6edf3; background: rgba(48, 54, 61, 0.55); }
.nav-subitem.active {
color: #e6edf3;
background: rgba(56, 139, 253, 0.18);
}
.nav-subitem-soon { color: #5b6672; cursor: default; }
.nav-subitem-soon:hover { background: none; }
/* Nested flyout (Neutral Abilities under Neutral Stats): the parent item opens
a second menu to its RIGHT on hover — a classic cascading menu. */
.nav-subgroup-nested { position: relative; display: block; }
.nav-subitem-parent { cursor: pointer; }
.nav-caret-side { font-size: 9px; opacity: 0.7; margin-left: 8px; }
.nav-submenu-flyout {
top: -6px; /* align the flyout's first row with the parent */
left: 100%;
margin-left: 5px;
border-radius: 8px;
}
/* The nested parent stays visually "open" (highlighted) while its flyout shows. */
.nav-subgroup-nested:hover > .nav-subitem-parent { color: #e6edf3; background: rgba(48, 54, 61, 0.55); }
.nav-soon-tag {
font-size: 8.5px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #b59a48;
border: 1px solid rgba(227, 196, 106, 0.4);
border-radius: 4px;
padding: 0 4px;
line-height: 1.4;
}
/* Ability-icon link on the Creeps Table — no underline, inherits layout. */
.creeps-table .abil-link {
text-decoration: none;
display: inline-block;
line-height: 0;
}
/* Vertical divider after every column (both Tables — Neutral Creeps + Unit
Abilities). The heavier col-sep dividers (set on category starts) stay
visible over this lighter base. */
.creeps-table th,
.creeps-table td { border-left: 1px solid rgba(170, 220, 240, 0.12); }
.creeps-table th:first-child,
.creeps-table td:first-child { border-left: none; }
/* Unit Abilities page table — reuses .creeps-table sticky/scroll machinery. */
.unit-abilities-table .ua-ability { text-align: left; }
.unit-abilities-table .ua-ability-inner {
display: inline-flex;
align-items: center;
gap: 13px; /* room so the hover-zoomed icon doesn't cover the name */
white-space: nowrap;
}
.unit-abilities-table .ua-ability-name { font-weight: 600; color: #e6edf3; }
/* Neutral Creeps "Unit" name cell matches the Neutral Abilities ability-name:
left-aligned, semibold, same colour, single line — so both Materials tables
share one look AND the same row height (no wrap-induced tall creep rows). */
.creeps-table td.col-name {
text-align: left;
font-weight: 600;
color: #e6edf3;
white-space: nowrap;
}
/* Type — plain coloured fills (no glass effect). */
.unit-abilities-table td.ua-type-active { background: rgba(80, 155, 230, 0.22); color: #d2e6ff; }
.unit-abilities-table td.ua-type-passive { background: rgba(170, 110, 215, 0.22); color: #e8d3f5; }
.unit-abilities-table td.ua-type-aura { background: rgba(225, 180, 80, 0.22); color: #f4e3b3; }
/* Damage Type — colour-coded text. */
/* Damage-type colour paints ONLY the numeric runs (.dmg-num) inside the
Damage cell — words like "в сек." or "+ N% Int" keep the default text
colour. The standalone Damage Type column was replaced by this scheme. */
.unit-abilities-table td.dt-magical .dmg-num,
.unit-abilities-table td.dt-magical .lvl-toggle { color: #5fb1ff; } /* blue */
.unit-abilities-table td.dt-physical .dmg-num,
.unit-abilities-table td.dt-physical .lvl-toggle { color: #e1716a; } /* bordeaux */
.unit-abilities-table td.dt-hpremoval .dmg-num,
.unit-abilities-table td.dt-hpremoval .lvl-toggle { color: #8aab7a; } /* dull green */
.unit-abilities-table td.dt-pure .dmg-num,
.unit-abilities-table td.dt-pure .lvl-toggle { color: #ead992; }
/* Collapsed upgrade value ("40…26"): a clickable button that keeps the column
narrow; the full per-tier list opens in a floating popover (scripts.js
positions it as `fixed`, so the column width never changes). */
.lvl-toggle {
font: inherit;
color: inherit;
background: none;
border: none;
padding: 0;
cursor: pointer;
white-space: nowrap;
text-decoration: underline dotted rgba(170, 220, 240, 0.45);
text-underline-offset: 2px;
}
.lvl-toggle:hover,
.lvl-toggle[aria-expanded="true"] { color: #cde9f5; }
.lvl-popover {
position: fixed;
z-index: 80;
display: none;
white-space: nowrap;
background: #0d1117;
border: 1px solid rgba(170, 220, 240, 0.4);
border-radius: 6px;
padding: 5px 9px;
font-size: 12px;
font-variant-numeric: tabular-nums;
color: #e6edf3;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
pointer-events: none;
}
.lvl-popover.show { display: block; }
/* Vertical category dividers (like Neutral Creeps): a left border on the first
visible column of each super-category, set by scripts.js markCatEdges() so it
tracks the column reorder in Auras view. Runs the full column height (header
col-row + every body cell). */
.unit-abilities-table th.cat-edge,
.unit-abilities-table td.cat-edge {
border-left: 2px solid rgba(170, 220, 240, 0.30);
}
/* "Only Auras" view filter — hide non-aura rows + irrelevant columns. The
super-category header STAYS in Auras view (scripts.js reorders columns into
contiguous category groups + recomputes the cat colspans for what's visible). */
.unit-abilities-table.filter-auras tbody tr:not(.ua-row-aura) { display: none; }
.unit-abilities-table.filter-auras th[data-col="type"],
.unit-abilities-table.filter-auras td[data-col="type"],
.unit-abilities-table.filter-auras th[data-col="dmg_type"],
.unit-abilities-table.filter-auras td[data-col="dmg_type"],
.unit-abilities-table.filter-auras th[data-col="damage"],
.unit-abilities-table.filter-auras td[data-col="damage"],
.unit-abilities-table.filter-auras th[data-col="manacost"],
.unit-abilities-table.filter-auras td[data-col="manacost"],
.unit-abilities-table.filter-auras th[data-col="cooldown"],
.unit-abilities-table.filter-auras td[data-col="cooldown"],
.unit-abilities-table.filter-auras th[data-col="cast_range"],
.unit-abilities-table.filter-auras td[data-col="cast_range"],
.unit-abilities-table.filter-auras th[data-col="dispel"],
.unit-abilities-table.filter-auras td[data-col="dispel"] { display: none; }
/* Auras Only: the empty Effect 1-3 columns take up the slack so the Ability
column doesn't get over-wide with whitespace. */
.unit-abilities-table.filter-auras th[data-col="effect"],
.unit-abilities-table.filter-auras td[data-col="effect"],
.unit-abilities-table.filter-auras th[data-col="effect2"],
.unit-abilities-table.filter-auras td[data-col="effect2"],
.unit-abilities-table.filter-auras th[data-col="effect3"],
.unit-abilities-table.filter-auras td[data-col="effect3"] { min-width: 180px; }
/* Flag glyphs (Stackable / Dispellable) — colours scoped to .ua-flag so the
column headers (th.ua-dispel etc.) stay default-coloured. */
.unit-abilities-table .ua-flag { font-size: 15px; font-weight: 700; line-height: 1; display: inline-block; }
.unit-abilities-table .ua-flag.ua-yes { color: #56d364; } /* green check */
.unit-abilities-table .ua-flag.ua-no { color: #f85149; } /* red x */
.unit-abilities-table .ua-flag.ua-dispel { color: #e3c14a; text-shadow: 0 0 4px rgba(227,193,74,0.6); } /* yellow star */
.unit-abilities-table .ua-flag.ua-dispel-strong { color: #f85149; text-shadow: 0 0 4px rgba(248,81,73,0.55); } /* red star */
/* Not-dispellable — hollow (outline) star, same shape/size as the others. */
.unit-abilities-table .ua-flag.ua-dispel-no {
color: transparent;
-webkit-text-stroke: 1.1px #7d828b;
text-stroke: 1.1px #7d828b;
}
/* Aura Stack red-x glyph — small. */
.unit-abilities-table .ua-stack-glyph { font-size: 8px; }
/* Cell dashes — half size. */
.unit-abilities-table .ua-dash,
.creeps-table .ua-dash,
.mr-table .ua-dash { color: #6e7681; font-size: 0.4em; }
/* "Ability" header centred; Type values left-aligned so the words line up. */
.unit-abilities-table th.ua-ability { text-align: center; }
.unit-abilities-table th.ua-type,
.unit-abilities-table td.ua-type { white-space: nowrap; }
/* Coloured yes/no text for Aura, Aura Stack, Dispellable. */
.unit-abilities-table .ua-yn { font-weight: 600; font-size: 11px; }
.unit-abilities-table .ua-yn-yes { color: #6aa775; } /* muted green */
.unit-abilities-table .ua-yn-no { color: #c97f78; } /* muted red */
.unit-abilities-table .ua-yn-strong { color: #c4ad5e; } /* muted yellow (strong dispel) */
/* Continuation rows of a multi-ability unit: no top border so the Lvl + Unit
cells read as one merged cell (icon shown only on the first row). */
.unit-abilities-table td.ua-merge { border-top: none; }
/* Raise the hovered sticky identity cell so its zoomed icon sits above
neighbouring rows. Stays BELOW the pinned header (z 50/51/52) so a hovered
row near the top can't paint over the header. */
.creeps-table .creep-icon-cell:hover,
.unit-abilities-table td.ua-ability:hover { z-index: 40; }
.unit-abilities-table td.ua-effect,
.unit-abilities-table td.ua-effect2,
.unit-abilities-table td.ua-effect3,
.unit-abilities-table td.ua-as_effect,
.unit-abilities-table td.ua-ms_effect { white-space: nowrap; color: #9fb0c0; }
/* Damage cell allows wrapping for long compound expressions (e.g. Mana Burn:
"20/25/30/35 + 200/250/350/400% Int"). */
.unit-abilities-table td.ua-damage { white-space: normal; }
.unit-abilities-table td.ua-damage .dmg-wrap,
.unit-abilities-table .cell-wrap {
display: inline-flex; align-items: center; flex-wrap: wrap;
justify-content: center; gap: 2px; line-height: 1.2;
}
/* Multiline damage: stack the two halves vertically (Mana Burn's flat +
Int-multiplier tail) so the cell stays narrow. */
.unit-abilities-table td.ua-damage .dmg-wrap.dmg-multiline {
flex-direction: column; gap: 1px;
}
.unit-abilities-table td.ua-damage .dmg-line2 {
display: inline-flex; align-items: center; gap: 2px;
}
.unit-abilities-table td.ua-damage .stat-ico {
height: 14px; width: 14px; vertical-align: -2px; margin-left: 2px;
}
/* Question-mark hint badge — appears inside a cell to surface an author note
without taking over the cell's hover (cell hover is reserved for patchnotes).
Used in the Damage cell ("от расстояния" for Tornado) and the Ability cell
("identical for all frog units" for Riverborn Aura). */
/* Hover affordance for ability icons that carry a body-level tooltip via
data-tooltip. No visual badge — the icon itself is the trigger. */
.abil-ico-hint {
display: inline-flex;
cursor: help;
outline: none;
}
.abil-ico-hint:focus-visible {
outline: 2px solid rgba(88, 166, 255, 0.6);
outline-offset: 2px;
border-radius: 4px;
}
.qhint {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
margin-left: 6px;
border: 1px solid #6b7682;
border-radius: 4px;
background: rgba(255, 255, 255, 0.04);
color: #e3c46a;
font-size: 10px;
font-weight: 700;
line-height: 1;
cursor: help;
user-select: none;
position: relative;
vertical-align: middle;
}
.qhint:hover,
.qhint:focus-visible {
color: #f4e3b3;
border-color: #e3c46a;
background: rgba(227, 196, 106, 0.15);
outline: none;
}
/* Tooltip body for `.qhint` is rendered at level (fixed-position) by
scripts.js so it escapes the .creeps-scroll overflow clip — a pure CSS
`::after` would be hidden behind the sticky header / scroll boundary. */
.qhint-tip {
position: fixed;
z-index: 1100;
pointer-events: none;
display: none;
max-width: 320px;
padding: 5px 9px;
background: #1b212a;
color: #e6edf3;
border: 1px solid #30363d;
border-radius: 5px;
font-size: 11px;
font-weight: 500;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
white-space: normal;
text-align: center;
}
.qhint-tip.is-visible { display: block; }
.qhint-tip .qh-line {
padding: 2px 0;
/* Wrap long lines within the tooltip's max-width instead of overflowing. */
white-space: normal;
text-align: left;
line-height: 1.35;
}
/* Keep the colored Yes/No glyph + dash on the same line as the start of the
description — only the trailing words flow onto a new line if needed. */
.qhint-tip .qh-line .ua-yn { white-space: nowrap; }
.qhint-tip .qh-line + .qh-line { border-top: 1px solid rgba(139, 148, 158, 0.18); }
.qhint-tip .ua-yn { font-weight: 600; font-size: 11px; }
.qhint-tip .ua-yn-yes { color: #6aa775; }
.qhint-tip .ua-yn-no { color: #c97f78; }
.qhint-tip .ua-yn-strong { color: #c4ad5e; }
/* Valve description variables (%hero_stun_duration% etc.) — values aren't
resolved here, so just colour the placeholder name to mark it as "variable". */
.qhint-tip .abil-var { color: #79c0ff; }
/* Damage-type colour swatches inside the Damage header tooltip — mirror the
in-table `td.dt-*` palette so the words match the actual cell numbers. */
.qhint-tip .dt-magical { color: #5fb1ff; font-weight: 600; }
.qhint-tip .dt-physical { color: #e1716a; font-weight: 600; }
.qhint-tip .dt-hpremoval { color: #8aab7a; font-weight: 600; }
.qhint-tip .dt-pure { color: #ead992; font-weight: 600; }
/* "Aura" word inside the Through BKB header tooltip — same warm-yellow tone
as the Aura cell type tag (.ua-type-aura) so the legend reads at a glance. */
.qhint-tip .hint-aura { color: #f4e3b3; font-weight: 600; }
/* (Legacy `.show-upgrades` rule lived here — replaced by the segmented
tier control + table[data-tier="all"] selector further below.) */
/* Aura Stack "yes" — green rounded diamond made of stacked tiles. The wrapper
is NOT rotated and carries a screen-space top-fade mask, so the upper part
of the icon fades out (weaker colour). ::after = front tile, ::before =
tile behind/above (the "multiple levels" look). */
.unit-abilities-table .ua-stack-yes {
position: relative;
display: inline-block;
width: 16px;
height: 18px;
vertical-align: middle;
-webkit-mask: linear-gradient(to top, #000 70%, rgba(0, 0, 0, 0.55) 100%);
mask: linear-gradient(to top, #000 70%, rgba(0, 0, 0, 0.55) 100%);
}
.unit-abilities-table .ua-stack-yes::before,
.unit-abilities-table .ua-stack-yes::after,
.unit-abilities-table .ua-stack-yes > i {
content: "";
position: absolute;
width: 9px;
height: 9px;
left: 3px;
border-radius: 3px;
transform: rotate(45deg);
/* dark outer outline separates the overlapping tiles clearly */
box-shadow: 0 0 0 1px rgba(8, 14, 10, 0.9);
}
/* Painting order: ::before (bottom) → → ::after (top). So ::after is the
FRONT tile (lowest, brightest), the middle, ::before the back (highest,
dimmest) — each tile sits behind and a little above the one in front. */
.unit-abilities-table .ua-stack-yes::after { /* front tile */
top: 6px;
background: #5fe06d;
}
.unit-abilities-table .ua-stack-yes > i { /* middle tile */
top: 3px;
background: #45a851;
}
.unit-abilities-table .ua-stack-yes::before { /* back tile (dimmest) */
top: 0;
background: #2c6f3a;
}
/* Unit Abilities: duplicate (same-unit continuation) rows hide the repeated
icon and drop the top border so the unit's rows read as one block. */
.unit-abilities-table tr.ua-dup .ua-unit img { visibility: hidden; }
/* The row jumped to from an ability link is marked via scripts.js with the
same `.row-marked` class as a manual click (gold frame) — see centerHash().
The old yellow `:target` flash was replaced so navigation and clicking
share one consistent selected style. */
/* Camp-type marker (minimap creep-camp glyph: small/mid/big/ancient). */
.creeps-table .camp-ico {
width: 16px;
height: 16px;
object-fit: contain;
vertical-align: middle;
max-width: none;
}
/* Keep both glyphs of a dual-camp creep on one line. */
.creeps-table td.col-camp { white-space: nowrap; }
.creeps-table .camp-ico + .camp-ico { margin-left: 2px; }
/* Ability cell icon — changelog style (45px there), smaller here. */
.creeps-table .abil-ico {
width: 26px;
height: 26px;
object-fit: cover;
border-radius: 4px;
display: inline-block;
vertical-align: middle;
border: 1px solid rgba(170, 220, 240, 0.18);
transform-origin: center center;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
/* Hover-zoom the ability icon, mirroring the unit-portrait pop-out. Bare
(non-autocast) icons scale directly; autocast icons scale via their wrapper
(below) so the snake ring zooms with the icon instead of doubling up. */
.creeps-table .abil-ico:hover {
transform: scale(1.8);
position: relative;
z-index: 30; /* above the sticky header (z 5/6) and neighbours */
background: #0e1217; /* opaque so underlying text doesn't show through */
box-shadow:
0 3px 8px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(170, 220, 240, 0.4);
}
/* Autocast marker — animated golden ring + pulsing glow around the ability
icon, mirroring the in-game autocast toggle. The wrapper is needed because
![]() cannot host ::before / ::after pseudo-elements. */
.creeps-table .abil-ico-wrap {
position: relative;
display: inline-block;
vertical-align: middle;
line-height: 0;
transform-origin: center center;
transition: transform 0.12s ease;
}
/* Autocast icon zoom — scale the whole wrapper (icon + snake) as one, and
suppress the inner img's own :hover scale so it doesn't compound. */
.creeps-table .abil-ico-wrap:hover {
transform: scale(1.8);
z-index: 30;
}
.creeps-table .abil-ico-wrap:hover .abil-ico {
transform: none;
z-index: auto;
box-shadow: none;
}
/* A thin golden "snake" — a short stroke segment that crawls along the icon's
rounded-rect frame at constant speed, corners included. The SVG has
pathLength=100, so the dash (snake) + gap sum to 100 and the dashoffset
animation loops seamlessly around the perimeter. */
.creeps-table .autocast-snake {
position: absolute;
inset: -1px;
width: calc(100% + 2px);
height: calc(100% + 2px);
overflow: visible;
pointer-events: none;
z-index: 2;
}
.creeps-table .autocast-snake rect {
fill: none;
stroke-linecap: butt;
stroke-dashoffset: 0;
/* Every stroke shares one phase-locked lap so the whole comet travels as a
unit. Painted range [a,b] is expressed as dasharray "0 a (b-a) (100-b)"
(leading 0-length dash + gap, then the painted dash). Head leads at the
high end; tail fades toward the low end. */
animation: autocast-snake 1.73s linear infinite;
}
/* Closed base ring — a continuous, static golden line around the whole frame.
The animated comet below sweeps around within it, so the snake reads as a
closed loop with the glow travelling inside itself. */
.creeps-table .autocast-snake .ac-ring {
stroke: #ffce72;
stroke-width: 1.5;
stroke-dasharray: none;
opacity: 0.34;
filter: drop-shadow(0 0 1.2px rgba(255, 190, 70, 0.6));
animation: none;
}
/* Wide, very soft, translucent aura spanning the whole comet — the "fluff". */
.creeps-table .autocast-snake .ac-fluff {
stroke: #ffc964;
stroke-width: 9;
stroke-linecap: round;
stroke-dasharray: 0 0 100 0; /* [0, 100] — full ring */
opacity: 0.10;
}
/* Bright body — the leading, fully-opaque stretch. Head sits at 100, which on
the closed path coincides with position 0, so the head meets the tail's tip:
the comet wraps the entire perimeter and touches itself. */
.creeps-table .autocast-snake .ac-body {
stroke: #fff3c8;
stroke-width: 1.8;
stroke-dasharray: 0 60 40 0; /* [60, 100] */
filter: drop-shadow(0 0 1.8px rgba(255, 190, 70, 0.95));
}
/* Tail — 4 overlapping steps with a gentle opacity ramp (1 → .78 → .5 → .28
→ .12), tapering width and rising blur toward the tip. The painted union
covers the whole [0,100] perimeter, so the faint tip (at 0) meets the bright
head (at 100) for a fully closed loop with no gap. */
.creeps-table .autocast-snake .ac-tail1 {
stroke: #ffe9ad;
stroke-width: 1.55;
stroke-dasharray: 0 46 18 36; /* [46, 64] */
opacity: 0.78;
filter: drop-shadow(0 0 1.5px rgba(255, 190, 70, 0.75));
}
.creeps-table .autocast-snake .ac-tail2 {
stroke: #ffe09a;
stroke-width: 1.2;
stroke-dasharray: 0 30 20 50; /* [30, 50] */
opacity: 0.5;
}
.creeps-table .autocast-snake .ac-tail3 {
stroke: #ffd98e;
stroke-width: 0.85;
stroke-dasharray: 0 14 20 66; /* [14, 34] */
opacity: 0.24;
}
.creeps-table .autocast-snake .ac-tail4 {
stroke: #ffd585;
stroke-width: 0.5;
stroke-dasharray: 0 0 18 82; /* [0, 18] */
opacity: 0.10;
}
/* Pollen — two phase-locked layers of tiny, irregular, heavily-blurred specks
that ride with the comet. Small widths + strong blur + varied dash sizes
dissolve the dots into a soft golden dust cloud (scatter) instead of crisp
beads. Each dasharray sums to 100 for a seamless lap. */
.creeps-table .autocast-snake .ac-pollen {
stroke: #fff3cf;
stroke-width: 1;
stroke-linecap: round;
stroke-dasharray: 0.5 4 0.4 5 0.6 3.5 0.3 5.5 0.5 4 0.4 4.5 0.5 5 0.3 4 0.6 4.5 0.4 5 0.5 4 0.3 45.7;
opacity: 0.5;
filter: drop-shadow(0 0 1.6px rgba(255, 205, 110, 0.85));
}
.creeps-table .autocast-snake .ac-pollen2 {
stroke: #ffeec2;
stroke-width: 0.6;
stroke-linecap: round;
stroke-dasharray: 0.3 6 0.4 5.5 0.3 6.5 0.4 5 0.3 7 0.4 6 0.3 6.5 0.4 6 0.3 48.4;
opacity: 0.4;
filter: drop-shadow(0 0 1.4px rgba(255, 210, 120, 0.8));
}
/* Sparse, bright, sharp twinkles with a strong glow — the "magic" sparkle on
top of the soft dust haze. */
.creeps-table .autocast-snake .ac-pollen3 {
stroke: #fffdf2;
stroke-width: 0.5;
stroke-linecap: round;
stroke-dasharray: 0.4 9 0.3 11 0.4 8 0.3 12 0.4 10 0.3 47.9;
opacity: 0.9;
filter: drop-shadow(0 0 2px rgba(255, 225, 150, 0.95));
}
@keyframes autocast-snake {
to { stroke-dashoffset: -100; }
}
@media (prefers-reduced-motion: reduce) {
.creeps-table .autocast-snake rect { animation: none; }
}
/* Ability name header inside the changelog tooltip (centered). */
.stat-hist-tip .abil-tip-name {
text-align: center;
font-weight: 600;
color: #e6edf3;
padding-bottom: 3px;
margin-bottom: 3px;
border-bottom: 1px solid rgba(139, 148, 158, 0.25);
}
/* Standard view hides Expanded-only columns. Super-category headers span all
their columns; the colspan shrinks automatically as hidden cells collapse. */
.creeps-table.mode-standard .col-exp { display: none; }
/* BOTH header rows stay pinned: the category row (Basic/Vitality/…) sticks at
top:0, and the column-name row pins directly beneath it at --cat-row-h
(set by scripts.js from the category row's rendered height). */
.creeps-table thead tr.cat-row th.cat-head {
position: sticky;
top: 0;
z-index: 52; /* above the column row so the col-row's gap-fill
box-shadow tucks under it (see col-row below) */
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #9fb0c0;
font-weight: 700;
/* Same colour as the column-name row below (base thead th = #161b22). A
single uniform header colour means there's NO colour boundary between the
two rows, so the zoom-dependent seam/gap is gone at every scale. The
category labels stay distinct through their uppercase dim styling. */
background: #161b22;
padding: 3px 4px;
/* Opaque lip extending 6px down past the edge: covers any sub-pixel sticky
positioning gap with the SAME colour, so nothing ever shows through at
scroll time regardless of zoom level. */
box-shadow: 0 6px 0 0 #161b22;
}
/* Column-name row — pinned under the category row. The blue scrolled-edge line
is painted flush on this row's bottom via box-shadow (matches the Mana Items
table; no separate overlay, so no gap). border-bottom is dropped because
Chrome drops collapsed borders on sticky cells mid-scroll. */
.creeps-table thead tr.col-row th {
/* -2px pull-up paired with the JS Math.floor on --cat-row-h: guarantees the
column row starts ≥2px BEFORE the category row's real bottom, so the two
pinned rows always overlap and nothing leaks through at scroll time. */
top: calc(var(--cat-row-h, 0px) - 2px);
border-bottom: none;
/* box-shadows, in order:
1. blue scrolled-edge line, flush on the bottom (like Mana Items);
2. soft drop shadow onto the body below;
3. a 14px-tall OPAQUE block extending UPWARD in the header colour — fills
any sub-pixel/rounding gap between this row and the category row above
(which sits at z-index 52 and paints over the overlapping part). This
kills the band where body content showed through, regardless of how
--cat-row-h rounds. */
box-shadow:
inset 0 -2px 0 rgba(120, 200, 235, 0.85),
0 4px 10px rgba(0, 0, 0, 0.45),
0 -14px 0 0 #161b22;
}
.creeps-table thead tr.cat-row .cat-head + .cat-head { border-left: 2px solid rgba(170, 220, 240, 0.22); }
/* Freeze the FIRST category cell (Basic = the frozen identity columns) on the
LEFT too, so during horizontal scroll the other category cells slide UNDER it
instead of their left borders drifting across the category header over the
frozen block (the col-row already does this via .sticky-col). Its right edge
carries the Basic|rest divider permanently so the line stays put when scrolled
(the sibling's border-left slides away beneath it). */
.creeps-table thead tr.cat-row th.cat-head:first-child {
left: 0;
z-index: 53; /* above sibling cat-heads (52) so they pass beneath it */
border-right: 2px solid rgba(170, 220, 240, 0.22);
}
/* ===================== Hero Dynamics matrix (heroes_dyn.html) =====================
Reuses the .creeps-table shell (sticky header + sticky-col + sticky-frame) and
the global .dyn-cell pill. ROWS = heroes (frozen icon+name column on the left),
COLUMNS = patches (version; release date on hover), CELLS = the hero's dyn-cell
that patch. Untouched cells render a static glassy diamond via ::after (keeps the
~14k-cell grid's HTML light); touched cells get a JS-built coloured pill.
Fixed table layout → every patch column is the SAME width so diamonds line up in
a clean vertical grid. Column widths (--hd-col-w) and the hero column width
(--hd-hero-w, sized to the longest name + icon + zoom clearance) are set live by
scripts.js dynLayoutMatrix(), which also keeps the latest patch flush right.
max-content width (NOT .creeps-table's min-width:100%, which would stretch the
columns unequally). */
/* AUTO layout (not fixed): a fixed-layout table derives column widths from the
FIRST row, which here is the colspan'd super-category row — that would ignore
the per-column widths. Auto layout (like Neutral Creeps) honours the explicit
width + min/max-width on the leaf columns below AND lets the super-category
colspans span correctly. width:max-content + min-width:0 stops the inherited
.creeps-table min-width:100% from stretching the columns. */
.heroes-dyn-table { table-layout: auto; width: max-content; min-width: 0; }
/* Hero identity column. The `.creeps-table` prefix raises specificity ABOVE the
shared `.creeps-table td:first-child` tier-dots rule (equal-specificity, later
in the file) which would otherwise force center-align + a symbol font +
white-space:normal onto this cell — making each row's icon+name land at a
different x (centred by name length) instead of one clean vertical line. */
.creeps-table.heroes-dyn-table th.hd-hero,
.creeps-table.heroes-dyn-table td.hd-hero {
width: var(--hd-hero-w, 210px);
min-width: var(--hd-hero-w, 210px);
max-width: var(--hd-hero-w, 210px);
text-align: left;
white-space: nowrap;
font-family: inherit;
letter-spacing: normal;
/* RULE (all tables): a vertical divider after the frozen identity column(s).
2px col-sep line at rest; the .sticky-frame overlay continues it during
horizontal scroll (Chrome drops borders on sticky cells mid-scroll). */
border-right: 2px solid rgba(170, 220, 240, 0.30);
}
/* The identity-column HEADER ("Hero" / "Item") is centred; the body cells stay
left-aligned (icon + name). */
.creeps-table.heroes-dyn-table thead th.hd-hero { text-align: center; }
.heroes-dyn-table td.hd-hero { padding: 2px 12px 2px 6px; }
/* Equal patch columns under auto layout: pin width + min + max so every column
is exactly --hd-col-w (the dyn-cell pill 28px sits centred inside). No
overflow:hidden on the cell — the 2.5× hover-pop must overflow it (the header
th below clips its own label separately). */
.heroes-dyn-table th.hd-patch,
.heroes-dyn-table td.hd-cell {
width: var(--hd-col-w, 40px);
min-width: var(--hd-col-w, 40px);
max-width: var(--hd-col-w, 40px);
box-sizing: border-box;
}
/* Icon + name baseline-aligned in one vertical rhythm across every row: fixed
icon box + fixed line-height so the text sits centred against the portrait,
and every name starts at the SAME x (icon width + gap). The 22px gap leaves
room for the hover-zoom (below) so the popped icon never reaches the name. */
.hd-hero-inner { display: inline-flex; align-items: center; gap: 22px; line-height: 1; }
.hd-hero-inner img {
width: 40px; height: 23px; object-fit: cover; border-radius: 3px;
border: 1px solid rgba(170, 220, 240, 0.18); flex: 0 0 auto;
/* Anchor the zoom at the LEFT edge so it grows rightward only — never past the
box's left edge (which would clip it behind the frozen-column boundary). */
transform-origin: left center;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
/* items_dyn: item/enchant icons are 88×64 (aspect 1.375), NOT the hero 16:9 — the
hero box (40×23) crops them top/bottom. Size the box to the item aspect (40×29)
so cover fills it without cropping (mirrors mana_items' .mr-ico approach). */
.items-dyn-table .hd-hero-inner img { height: 29px; }
.hd-hero-name { font-weight: 600; color: #e6edf3; }
/* RULE (all tables): hovering a hero/unit portrait pops it out — like Neutral
Creeps. The 18px gap + name-fitted column width keep the 1.8× zoom from ever
covering the name. The icon's stacking sits under the sticky header (sticky-col
z:3 < header), so a top-row zoom slides BEHIND the header (matches creeps). */
.heroes-dyn-table td.hd-hero:hover .hd-hero-inner img {
/* 1.5× from the left edge → grows 20px right, clearing the 22px gap so it
stops short of the name; z-index lifts it ABOVE the name text. */
transform: scale(1.5); position: relative; z-index: 41;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(170, 220, 240, 0.4);
}
/* ============================================================================
UNIFIED TOOLBAR PANEL — SITE STANDARD (every Materials toolbar).
All controls live inside ONE bordered surface (.toolbar-panel) instead of a row
of separate floating pills. The outer .cal-toggle-bar.inbox-bar keeps the
Materials rhythm (28px side inset + top/bottom gaps); .toolbar-panel is the
raised surface. RULE: wrap any new page's toolbar controls in
… .
============================================================================ */
.hd-page .cal-toggle-bar.hd-toolbar { flex-wrap: wrap; row-gap: 8px; }
.toolbar-panel {
display: flex; flex-wrap: wrap; align-items: center;
gap: 6px 6px; width: 100%; flex: 1 1 100%; box-sizing: border-box;
background: #11161d; border: 1px solid #30363d; border-radius: 8px;
padding: 7px 12px;
}
/* Switches + chip/label groups go FLAT (transparent) — the panel border replaces
their individual pill borders. Inputs/selects (search, price combo, View select)
keep their own field border. Chips keep their own design. */
.toolbar-panel .ua-upgrades-toggle,
.toolbar-panel .hd-remove-group,
.toolbar-panel .hd-class-group,
.toolbar-panel .hs-attack-filter-group,
.toolbar-panel .hs-attr-filter-group,
.toolbar-panel .hs-level-group,
.toolbar-panel .view-group {
background: transparent; border-color: transparent;
}
.toolbar-panel .ua-upgrades-toggle:hover { border-color: transparent; }
.toolbar-panel .ua-upgrades-toggle { padding: 4px 4px; gap: 5px; }
/* Thin divider before every control except the first — so the panel reads as one
surface with sections. EXCEPT between two consecutive switches (they group
tightly, no divider). */
.toolbar-panel > *:not(:first-child) { position: relative; padding-left: 12px; }
.toolbar-panel > *:not(:first-child)::before {
content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 1px; height: 18px; background: #30363d;
}
.toolbar-panel > .ua-upgrades-toggle + .ua-upgrades-toggle { padding-left: 4px; }
.toolbar-panel > .ua-upgrades-toggle + .ua-upgrades-toggle::before { content: none; }
.hs-attack-filter-group,
.hs-attr-filter-group,
.hs-level-group {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
box-sizing: border-box;
}
.hs-attack-filter {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 8px 0 6px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 5px;
background: rgba(255, 255, 255, 0.035);
color: #c9d1d9;
font-family: inherit;
font-size: 12px;
cursor: pointer;
transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease, filter 0.12s ease;
}
.hs-attr-filter {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 28px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 5px;
background: rgba(255, 255, 255, 0.035);
cursor: pointer;
transition: border-color 0.12s ease, background 0.12s ease, filter 0.12s ease;
}
.hs-attack-filter:hover {
color: #fff;
border-color: rgba(227, 196, 106, 0.45);
filter: brightness(1.12);
}
.hs-attr-filter:hover {
border-color: rgba(227, 196, 106, 0.45);
filter: brightness(1.12);
}
.hs-attack-filter.active,
.hs-attack-filter[aria-pressed="true"] {
border-color: rgba(227, 196, 106, 0.82);
background: rgba(227, 196, 106, 0.14);
box-shadow: inset 0 0 0 1px rgba(227, 196, 106, 0.12);
}
.hs-attr-filter.active,
.hs-attr-filter[aria-pressed="true"] {
border-color: rgba(227, 196, 106, 0.82);
background: rgba(227, 196, 106, 0.14);
box-shadow: inset 0 0 0 1px rgba(227, 196, 106, 0.12);
}
.hs-attack-filter .atk-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 18px;
box-sizing: border-box;
border-radius: 5px;
background: linear-gradient(rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
border: 1px solid rgba(255, 255, 255, 0.14);
}
.hs-attack-filter .atk-badge img {
width: 12px;
height: 12px;
object-fit: contain;
display: block;
opacity: 0.9;
}
.hs-attr-filter img {
width: 18px;
height: 18px;
object-fit: contain;
display: block;
}
/* ===================== Hero Lab calculator ===================== */
.hero-lab-page {
max-width: none;
}
.hero-lab {
display: grid;
grid-template-columns: minmax(420px, 1fr) minmax(240px, 300px) minmax(420px, 1fr);
gap: 18px;
align-items: start;
margin-top: 12px;
padding: 0 28px 28px;
}
.hl-panel,
.hl-diff-panel {
background:
linear-gradient(180deg, rgba(50, 55, 61, 0.9), rgba(27, 30, 35, 0.96)),
#181c21;
border: 1px solid rgba(122, 111, 88, 0.55);
box-shadow:
inset 0 1px 0 rgba(255, 242, 200, 0.08),
inset 0 -1px 0 rgba(0, 0, 0, 0.45),
0 8px 18px rgba(0, 0, 0, 0.3);
border-radius: 6px;
padding: 16px;
}
.hl-hud {
display: grid;
/* Wide portrait column matches the hero-art asset's native aspect (≈ 16:9),
same approach as heroes_stats `.mr-ico` (36×26 = 1.38:1). 124×72 keeps the
portrait readable without forcing it into a square. */
grid-template-columns: 124px minmax(0, 1fr);
gap: 14px;
align-items: start;
margin-bottom: 10px;
}
.hl-identity {
display: block;
width: 124px;
}
.hl-portrait-wrap {
position: relative;
width: 124px;
height: 72px;
}
.hl-hero-trigger,
.hl-inv-slot,
.hl-shop-tab,
.hl-picker-close,
.hl-picker-clear,
.hl-hero-tile,
.hl-item-tile {
border: 0;
background: none;
padding: 0;
font: inherit;
color: inherit;
cursor: pointer;
}
.hl-hero-icon {
/* Same pattern as heroes_stats `.mr-ico` — wide rect, cover-fit so the hero
art fills the box without letterboxing. Codex noted: `icons/heroes/*.png`
is a wide art asset, not square. */
width: 124px;
height: 72px;
object-fit: cover;
object-position: center;
border-radius: 4px;
display: block;
border: 1px solid rgba(170, 220, 240, 0.18);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
background: #0e1115;
}
.hl-hero-trigger {
width: 124px;
height: 72px;
display: block;
}
.hl-identity-main {
display: none;
}
.hl-level-corner {
position: absolute;
left: 4px;
bottom: 4px;
width: 30px;
height: 22px;
z-index: 2;
}
.hl-level-input,
.hl-custom input {
min-width: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 1px solid rgba(117, 108, 87, 0.72);
border-radius: 3px;
background:
linear-gradient(180deg, rgba(32, 35, 39, 0.95), rgba(10, 12, 15, 0.98)),
#0c0f12;
color: #f2efe4;
font: inherit;
text-align: center;
font-variant-numeric: tabular-nums;
padding: 0 3px;
-moz-appearance: textfield;
appearance: textfield;
box-shadow: inset 0 1px 0 rgba(255, 241, 200, 0.05);
}
.hl-level-input {
font-size: 12px;
font-weight: 700;
}
.hl-custom input {
height: 30px;
}
.hl-level-input::-webkit-outer-spin-button,
.hl-level-input::-webkit-inner-spin-button,
.hl-custom input::-webkit-outer-spin-button,
.hl-custom input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Dota 2 Reborn HUD inventory — visual model from the actual HUD screenshot:
• the 3×2 main grid is a single piece — slots are very dark almost-black
wells separated by thin light-gray dividers, achieved with the classic
"container with a light bg + dark slots + gap" trick (the bg shows
through the gaps as the dividers — no per-slot borders needed);
• the round neutral slot sits on its OWN dark backdrop outside the main
grid, with just a thin dark ring border — NOT the silver `circle_frame`
texture (that one has a decorative right-side tab and is used elsewhere
in the HUD, not for inventory slots);
• backpack/courier slots (the 3 angled ones in Valve's screenshot) are
NOT modelled — Hero Lab has only 6 + 1 neutral.
Why I dropped the extracted plate texture (`inventory_bg.png`): on close
inspection its diagonal lines are random stone scratches, not the slot grid,
so using it as a background under CSS slots gave a noisy look that didn't
match the screenshot's clean grid. The HUD's actual visible "slot well"
look IS the CSS gap/divider trick — Valve's panorama renderer composites a
subtle slate onto the page behind the slots, then draws the slots as flat
colour boxes; here we just use the page's own dark colour for the divider
tone and skip the texture entirely. */
/* Authoritative values from Valve's HUD_Inventory.res + HUD_InventoryStash.res:
• InventoryButton wide=48 tall=36 → slot is 48×36 px (native).
• InventoryBackground1 fillcolor "0 0 0" → outer plate fill = pure black.
• InventoryBackground2 fillcolor "36 36 36" → inner panel fill = #242424
(this is what shows through the gaps between slots as the "divider"
colour — NOT the light gray I had before).
• Each slot also gets `materials/vgui/hud/item_bg.vmat` as its own image
(per-slot texture). When the user provides the extracted item_bg PNG it
will become each slot's background; until then we approximate with a flat
near-black fill that matches the slot interior in the HUD screenshot. */
.hl-inventory {
display: grid;
grid-template-columns: 220px 62px;
grid-template-rows: 122px;
gap: 14px;
justify-content: end;
align-items: start;
justify-self: end;
margin-left: auto;
}
/* Inventory backdrop uses Valve's `inventory_bg_bg_psd.vtex`. `inventory_panel`
belongs to another HUD surface and is too blue/stone-tiled for item wells. */
.hl-inv-grid {
grid-column: 1;
grid-row: 1;
width: 220px;
height: 122px;
display: grid;
grid-template-columns: repeat(3, 60px);
grid-template-rows: repeat(2, 52px);
/* These exact gap+padding values place the CSS slots over the texture's own
stone-tile cells (figured out by overlaying the panel and walking the seam
spacing — top 8px, sides 8px, between-rows 8px, between-cols 6px). */
column-gap: 12px;
row-gap: 10px;
padding: 4px 8px;
background:
linear-gradient(180deg, rgba(23, 28, 34, 0.96), rgba(14, 18, 22, 0.98)),
#11161d;
border: 1px solid rgba(170, 220, 240, 0.14);
border-radius: 8px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.04),
0 8px 18px rgba(0, 0, 0, 0.24);
box-sizing: border-box;
align-content: center;
justify-content: center;
}
/* In-game inventory cells read as recessed rectangular wells: dark inner field,
heavy black top/left shadow, faint right/bottom lip. */
.hl-inv-slot {
position: relative;
width: 60px;
height: 52px;
border: 0;
border-radius: 6px;
overflow: hidden;
background:
linear-gradient(180deg, rgba(50, 55, 61, 0.9), rgba(27, 30, 35, 0.96)),
#181c21;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.04),
inset 0 -1px 0 rgba(0,0,0,0.42),
0 0 0 1px rgba(170, 220, 240, 0.12);
transition: filter 0.12s ease;
}
/* Bevel overlay (Valve's `.Reborn #inventory #AbilityBevel`) — the thin
silvery rim at the top of each slot. The texture itself is very low-alpha
(mostly transparent), so it reads as a subtle highlight, not a hard frame. */
.hl-slot-bevel {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(170, 220, 240, 0.08), transparent 36%);
z-index: 2;
}
.hl-inv-slot img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hl-inv-slot:hover {
/* Valve: `#AbilityButton:hover { brightness: 1.6 }`. */
filter: brightness(1.6);
}
.hl-inv-slot:focus-visible {
outline: 1px solid rgba(213, 173, 95, 0.85);
outline-offset: -2px;
}
.hl-inv-slot.is-empty::before { content: none; }
/* Round neutral slot — same matte dark fill as the rectangular slots, with a
simple 1px dark-gray ring (NOT the silver circle_frame texture, which has a
decorative tab that doesn't appear on real inventory slots). The slot sits
in its own grid column outside the main slot block, like the HUD's right
cluster of currency/neutral/gold discs. */
/* Neutral slot — Valve uses a separate `bg_neutral_slot_png.vtex` disc here.
It is the full circular slot texture, not just the inner glyph. */
/* Neutral stack lives in column 2, height matches the inv-grid (122px) so the
neutral slot's top edge HORIZONTALLY ALIGNS with the top edge of the 6-slot
grid. Internal layout: neutral (52×52) → connector (12px) → enchant (30×30).
Total = 52+12+30 = 94px, the stack is centered vertically inside 122px so
both slots read as a paired unit. Nudged 8px further right of the inv-grid
for breathing room. */
.hl-neutral-stack {
grid-column: 2;
grid-row: 1;
position: relative;
width: 52px;
height: 122px;
display: grid;
grid-template-rows: 4px 52px 12px 30px 4px;
/* 4px top spacer matches inv-grid's own 4px top padding, so the neutral
slot's top edge sits on the same baseline as the item slots inside it. */
justify-items: center;
margin-left: 14px;
}
/* Connector line between neutral and enchant — drawn on the gap row of the
stack grid, so it can never escape the neutral block visually. */
.hl-neutral-stack::after {
content: "";
grid-row: 3;
align-self: stretch;
justify-self: center;
width: 2px;
background: linear-gradient(180deg, rgba(170, 220, 240, 0.28), rgba(72, 88, 102, 0.55));
}
.hl-neutral-slot {
grid-row: 2;
width: 52px;
height: 52px;
border-radius: 6px;
background:
linear-gradient(180deg, rgba(50, 55, 61, 0.9), rgba(27, 30, 35, 0.96)),
#181c21;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.04),
0 0 0 1px rgba(170, 220, 240, 0.14),
0 8px 18px rgba(0, 0, 0, 0.2);
transition: filter 0.12s ease, box-shadow 0.12s ease;
}
.hl-neutral-slot .hl-slot-bevel { border-radius: 6px; }
.hl-enchant-slot {
grid-row: 4;
width: 30px;
height: 30px;
border-radius: 6px;
background:
linear-gradient(180deg, rgba(50, 55, 61, 0.9), rgba(27, 30, 35, 0.96)),
#181c21;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.04),
0 0 0 1px rgba(170, 220, 240, 0.12),
0 5px 10px rgba(0, 0, 0, 0.18);
}
.hl-enchant-slot .hl-slot-bevel { border-radius: 6px; background: linear-gradient(180deg, rgba(170, 220, 240, 0.08), transparent 36%); }
/* Item icons in neutral + enchant slots: fill the slot completely. Source
icons (Dota's neutral/enchant PNGs) are rendered as `cover` to remove the
blank top/bottom strips that appeared when contain was leaving the slot's
margins exposed; the icons already crop cleanly. */
.hl-enchant-slot img,
.hl-neutral-slot img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
}
.hl-neutral-slot:hover { filter: brightness(1.6); }
.hl-neutral-slot.is-empty::before { content: none; }
.hl-enchant-slot:hover { filter: brightness(1.6); }
.hl-enchant-slot.is-empty::before { content: none; }
.hl-neutral-mark {
display: none;
}
.hl-enchant-mark {
display: none;
}
.hl-slot-glow {
pointer-events: none;
position: absolute;
inset: 0;
border-radius: inherit;
background: transparent;
}
.hl-bars {
display: grid;
gap: 8px;
margin-bottom: 12px;
}
.hl-bar {
position: relative;
height: 26px;
border-radius: 3px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.55);
background: #040608;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
inset 0 -1px 0 rgba(0,0,0,0.6);
}
.hl-bar-fill {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: 3px;
}
.hl-bar-hp .hl-bar-fill {
background: linear-gradient(180deg, #425d25 0%, #5ba539 20%, #4d9030 50%, #425d25 100%);
}
.hl-bar-mp .hl-bar-fill {
background: linear-gradient(180deg, #2b4287 0%, #4165ce 20%, #4a73ea 50%, #2b4287 100%);
}
.hl-bar-fill::before,
.hl-bar-fill::after {
content: "";
pointer-events: none;
position: absolute;
inset: -45% -22%;
opacity: 0.38;
mix-blend-mode: screen;
}
.hl-bar-fill::before {
background:
radial-gradient(70px 28px at 18% 52%, rgba(255, 255, 255, 0.32), transparent 68%),
radial-gradient(92px 30px at 76% 48%, rgba(255, 255, 255, 0.20), transparent 72%),
linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.14) 42%, transparent 68%);
transform: translateX(-28%);
animation: hl-bar-flow 8.5s ease-in-out infinite;
}
.hl-bar-fill::after {
inset: -28% -10%;
opacity: 0.24;
background:
radial-gradient(34px 70px at 0% 50%, rgba(255, 255, 255, 0.26), transparent 72%),
radial-gradient(42px 80px at 100% 50%, rgba(255, 255, 255, 0.22), transparent 72%);
animation: hl-bar-edge-flow 5.8s ease-in-out infinite alternate;
}
.hl-bar-hp .hl-bar-fill::before,
.hl-bar-hp .hl-bar-fill::after {
filter: sepia(0.25) saturate(1.15) hue-rotate(38deg);
}
.hl-bar-hp .hl-bar-fill::after {
opacity: 0.30;
}
.hl-bar-mp .hl-bar-fill::before,
.hl-bar-mp .hl-bar-fill::after {
filter: saturate(1.22) hue-rotate(7deg);
}
@keyframes hl-bar-flow {
0% { transform: translateX(-34%) scaleX(0.94); opacity: 0.18; }
42% { transform: translateX(6%) scaleX(1.05); opacity: 0.42; }
100% { transform: translateX(32%) scaleX(0.98); opacity: 0.20; }
}
@keyframes hl-bar-edge-flow {
from { transform: translateX(-2%); opacity: 0.16; }
to { transform: translateX(2%); opacity: 0.30; }
}
@media (prefers-reduced-motion: reduce) {
.hl-bar-fill::before,
.hl-bar-fill::after {
animation: none;
}
}
.hl-bar-value,
.hl-bar-regen {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
font-weight: 800;
font-variant-numeric: tabular-nums;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.95),
0 0 3px rgba(0, 0, 0, 0.95);
}
.hl-bar-value {
left: 50%;
transform: translate(-50%, -50%);
color: #f2f7fb;
padding: 0 8px;
border-radius: 2px;
background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.34), rgba(0,0,0,0));
}
.hl-bar-regen {
right: 10px;
color: #9df189;
}
.hl-bar-mp .hl-bar-regen {
color: #a9d2ff;
}
.hl-custom {
border-top: 1px solid rgba(190, 177, 134, 0.16);
border-bottom: 1px solid rgba(190, 177, 134, 0.16);
padding: 10px 0;
margin-bottom: 10px;
}
.hl-custom summary {
cursor: pointer;
color: #d7c276;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 11px;
}
.hl-custom-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
padding-top: 10px;
}
.hl-custom-grid label {
display: grid;
gap: 4px;
color: #bdc6cf;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.hl-total-list,
.hl-diff-list {
display: grid;
gap: 2px;
}
.hl-stat-row,
.hl-diff-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
min-height: 22px;
padding: 4px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
color: #d6dde4;
}
.hl-stat-row span,
.hl-diff-row span {
color: #9aa7b2;
font-size: 12px;
}
.hl-stat-row strong,
.hl-diff-row strong {
color: #f0f5fa;
font-variant-numeric: tabular-nums;
}
.hl-cost strong,
.hl-kicker,
.hl-patch {
color: #d7c276;
}
.hl-diff-head {
display: grid;
gap: 4px;
margin-bottom: 14px;
text-align: center;
}
.hl-diff-head strong {
color: #f0f5fa;
font-size: 22px;
font-family: "Jersey 25", serif;
letter-spacing: 0.04em;
}
.hl-diff-row strong.pos { color: #7ee787; }
.hl-diff-row strong.neg { color: #ff7b72; }
.hl-diff-row strong.zero { color: #6e7681; }
.hl-overlay {
position: fixed;
inset: 0;
z-index: 260;
background: rgba(6, 10, 14, 0.84);
backdrop-filter: blur(6px);
}
.hl-overlay.is-open {
display: grid;
place-items: center;
padding: 28px;
}
.hl-picker-card {
width: min(1180px, calc(100vw - 56px));
max-height: min(820px, calc(100vh - 56px));
overflow: auto;
border: 1px solid rgba(114, 103, 75, 0.92);
border-radius: 4px;
background:
linear-gradient(180deg, rgba(28, 30, 33, 0.985), rgba(18, 20, 24, 0.985)),
#171a1f;
box-shadow:
inset 0 1px 0 rgba(255, 244, 205, 0.08),
0 22px 48px rgba(0, 0, 0, 0.48);
}
.hl-picker-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 14px 16px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hl-picker-head strong {
color: #f0f5fa;
font-size: 18px;
font-family: "Jersey 25", serif;
letter-spacing: 0.04em;
}
.hl-picker-actions {
display: inline-flex;
align-items: center;
gap: 8px;
}
.hl-picker-close,
.hl-picker-clear,
.hl-shop-tab {
border: 1px solid rgba(121, 109, 81, 0.75);
background:
linear-gradient(180deg, rgba(41, 44, 49, 0.96), rgba(15, 18, 22, 0.98)),
#12161b;
color: #e6e0d1;
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.hl-picker-close,
.hl-picker-clear {
height: 28px;
padding: 0 10px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.hl-picker-close {
width: 28px;
padding: 0;
}
.hl-hero-grid-wrap,
.hl-shop-body {
padding: 14px 16px 16px;
}
.hl-hero-grid-wrap {
display: grid;
gap: 16px;
}
.hl-hero-group header,
.hl-item-section header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
color: #d8dee5;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.11em;
}
.hl-hero-group-icon {
width: 16px;
height: 16px;
display: block;
}
.hl-hero-grid,
.hl-item-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(58px, 58px));
gap: 6px;
}
.hl-hero-tile,
.hl-item-tile {
width: 58px;
height: 43px;
border: 1px solid rgba(109, 90, 48, 0.68);
border-radius: 2px;
overflow: hidden;
position: relative;
background: #090c0f;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.hl-hero-tile img,
.hl-item-tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hl-hero-tile.is-selected,
.hl-item-tile.is-selected {
border-color: #f1d27b;
box-shadow:
inset 0 0 0 1px rgba(255, 241, 191, 0.35),
0 0 0 1px rgba(241, 210, 123, 0.24);
}
.hl-shop-tabs {
display: flex;
gap: 4px;
padding: 0 16px;
}
.hl-shop-tab {
min-width: 108px;
height: 36px;
padding: 0 14px;
color: #cad3db;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.hl-shop-tab.is-active {
color: #fff7df;
border-color: #d7c276;
background:
linear-gradient(180deg, rgba(55, 59, 66, 0.98), rgba(26, 29, 33, 0.98)),
#1a1d22;
}
.hl-shop-body {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 28px;
}
.hl-neutrals-layout {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
gap: 28px;
}
.hl-neutrals-tiers {
display: grid;
gap: 14px;
}
.hl-neutrals-enchants .hl-item-grid {
grid-template-columns: repeat(auto-fill, minmax(43px, 43px));
}
@media (max-width: 1040px) {
.hero-lab {
grid-template-columns: 1fr;
padding-left: 18px;
padding-right: 18px;
}
.hl-diff-panel {
order: 3;
}
.hl-neutrals-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 820px) {
.hl-hud,
.hl-level-row,
.hl-shop-body {
grid-template-columns: 1fr;
}
.hl-inventory {
justify-content: start;
}
.hl-picker-card {
width: min(100vw - 20px, 1180px);
max-height: calc(100vh - 20px);
}
}
@media (max-width: 560px) {
.hero-lab {
padding-left: 10px;
padding-right: 10px;
}
.hl-identity,
.hl-custom-grid {
grid-template-columns: 1fr;
}
.hl-name-row {
flex-wrap: wrap;
}
.hl-quick {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hl-identity {
display: block;
}
.hl-inventory {
grid-template-columns: 220px 62px;
grid-template-rows: 122px;
}
.hl-inv-grid {
width: 220px;
height: 122px;
grid-template-columns: repeat(3, 60px);
grid-template-rows: repeat(2, 52px);
column-gap: 12px;
row-gap: 10px;
padding: 4px 8px;
}
/* Neutral slot stays circular on mobile. */
.hl-neutral-slot {
width: 52px;
height: 52px;
aspect-ratio: 1;
justify-self: center;
}
.hl-enchant-slot {
width: 30px;
height: 30px;
}
.hl-inv-slot {
width: 60px;
height: 52px;
aspect-ratio: auto;
}
.hl-hero-grid,
.hl-item-grid {
grid-template-columns: repeat(auto-fill, minmax(48px, 48px));
}
.hl-hero-tile,
.hl-item-tile {
width: 48px;
height: 36px;
}
}
.hs-level-group {
color: #c9d1d9;
font-size: 12px;
}
.hs-level-group span {
color: #8b949e;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.hs-level-group input {
width: 44px;
height: 28px;
box-sizing: border-box;
border: 1px solid #30363d;
border-radius: 5px;
background: #0d1117;
color: #e6edf3;
font: inherit;
text-align: center;
font-variant-numeric: tabular-nums;
/* Hide native number-spinner controls — easy to misclick when aiming at
the field itself. Keyboard +/- + scroll-wheel still work. */
-moz-appearance: textfield;
appearance: textfield;
}
.hs-level-group input::-webkit-outer-spin-button,
.hs-level-group input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.hs-level-group input:focus {
outline: none;
border-color: #e3c46a;
box-shadow: 0 0 0 1px rgba(227, 196, 106, 0.22);
}
.hs-level-group input:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* A toolbar search box always sits on its OWN full-width row at the bottom of the
panel (flex-basis 100% forces a wrap) — even when there are few other controls.
No leading divider/indent since it owns its row. */
.toolbar-panel > .hd-search {
flex: 1 1 100%; min-width: 0; padding-left: 0; margin-top: 2px;
}
.toolbar-panel > .hd-search::before { content: none; }
.toolbar-panel > .hd-search input { width: 100%; box-sizing: border-box; }
/* "Remove" group + search wrapped in the SAME 32px bordered pill-block as the
switches, so all toolbar controls share one height/baseline. */
.hd-remove-group {
display: inline-flex; align-items: center; gap: 6px;
height: 32px; box-sizing: border-box; padding: 0 10px;
background: #161b22; border: 1px solid #30363d; border-radius: 5px;
}
.hd-search { flex: 0 1 240px; min-width: 150px; }
.hd-search input { height: 32px; box-sizing: border-box; }
/* "Remove" tag chips: the patch-page badges, clickable. A removed tag sinks in
(inset shadow + nudge) and greys out — visibly "off". */
.hd-tag {
cursor: pointer; user-select: none; font-family: inherit; font-size: 11px;
padding: 2px 9px; transition: filter 0.12s, transform 0.12s, opacity 0.12s, box-shadow 0.12s;
}
.hd-tag:hover { filter: brightness(1.18); transform: translateY(-1px); }
.hd-tag.removed {
filter: grayscale(1) brightness(0.62); opacity: 0.5; transform: translateY(1px);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55);
}
/* Multi-select dropdown (items_dyn Type / Category): the button is FLAT inside the
panel — no own box/border, just text + caret like the switches, so every control
shares one height and the panel is the only border. The gold badge shows the
selected count (blank when all are selected = no active filter). Only the popover
itself is a floating box. */
.hd-dd { position: relative; display: inline-flex; }
.hd-dd-btn {
display: inline-flex; align-items: center; gap: 6px;
height: 32px; box-sizing: border-box; padding: 0 2px;
background: transparent; border: none; border-radius: 0;
color: #c9d1d9; font-family: inherit; font-size: 12.5px;
cursor: pointer; user-select: none; transition: color 0.12s;
}
.hd-dd-btn:hover .hd-dd-label,
.hd-dd-btn[aria-expanded="true"] .hd-dd-label { color: #fff; }
.hd-dd-caret { color: #8b949e; flex: none; transition: transform 0.12s; }
.hd-dd-btn[aria-expanded="true"] .hd-dd-caret { transform: rotate(180deg); color: #c9d1d9; }
.hd-dd-badge { color: #e3c46a; font-weight: 700; font-variant-numeric: tabular-nums; }
.hd-dd-badge:empty { display: none; }
/* Popover is PORTALED to + positioned `fixed` by JS (top/left), so it escapes
.creeps-scroll's contain:paint clip and never pushes a scrollbar on an empty table. */
.hd-dd-menu {
position: fixed; z-index: 1000;
min-width: 150px; white-space: nowrap; max-height: 70vh; overflow: auto;
background: #0d1117; border: 1px solid #30363d; border-radius: 6px;
padding: 5px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
display: flex; flex-direction: column; gap: 1px;
}
.hd-dd-menu[hidden] { display: none; }
.hd-dd-opt {
display: flex; align-items: center; gap: 8px;
padding: 6px 10px; border-radius: 4px;
font-size: 12.5px; color: #c9d1d9; cursor: pointer; user-select: none;
}
.hd-dd-opt:hover { background: #161b22; }
.hd-dd-opt input { accent-color: #e3c46a; width: 14px; height: 14px; cursor: pointer; flex: none; }
.hd-dd-all { font-weight: 700; color: #e3c46a; } /* the "All" master row */
.hd-dd-sep { height: 1px; background: #30363d; margin: 3px 2px; }
/* The dynamics toolbar must out-stack the table's sticky header/corner cells
(z up to 52, hover-zoom 60) so an open dropdown popover isn't hidden under them.
Overrides the z-index:6 from `.creeps-scroll > .inbox-bar`. */
.creeps-scroll > .cal-toggle-bar.hd-toolbar { z-index: 62; }
/* Price filter (items_dyn + mana_items, both use .toolbar-panel): FLAT — the range
has no box, inputs read as underlined fields, label is muted. Same height as the
rest. The 12px inner left padding keeps the "Price" label off the focus-ring border
even when the control is the panel's FIRST child (mana_items, where the divider's
left gap doesn't apply). */
.toolbar-panel .mr-price-range {
height: 32px; box-sizing: border-box; padding-left: 12px;
background: transparent; border-color: transparent;
}
.mr-price-label {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
color: #8b949e; padding-right: 4px; user-select: none;
}
.toolbar-panel .mr-price-input {
width: 44px; padding: 3px 2px;
border-bottom: 1px solid #30363d; border-radius: 0; transition: border-color 0.12s;
}
.toolbar-panel .mr-price-input:focus { border-bottom-color: #e3c46a; }
.toolbar-panel .mr-price-clear { border-left: none; }
/* Uniform 32px height for the flat switches too, so every panel control lines up. */
.toolbar-panel .ua-upgrades-toggle { height: 32px; }
/* Full-height vertical divider separating super-category (base-version) groups —
same idea as Neutral Creeps' .col-sep category dividers. On the first column
of each group (except the first); aligns with the cat-row's group border. */
.heroes-dyn-table th.hd-gsep,
.heroes-dyn-table td.hd-gsep { border-left: 2px solid rgba(170, 220, 240, 0.22); }
/* Patch column header: just the version; release date shows in the hover tip. */
.heroes-dyn-table th.hd-patch {
white-space: nowrap; padding: 4px 2px; font-weight: 600; font-size: 12px;
color: #c9d1d9; text-align: center; vertical-align: bottom; cursor: help;
overflow: hidden;
}
/* Super-category row: base version (e.g. 7.41) spanning its lettered variants
(7.41/a/b/c). Reuses the shared .cat-head sticky/layout infrastructure;
overrides the dim-uppercase look for a centred version number. Solo bases
(single patch, no letters) render an empty cell — no label. JS
dynRecomputeSupercats() re-spans these to the visible columns after fit. */
.heroes-dyn-table thead tr.cat-row th.hd-supercat {
font-size: 12px; text-transform: none; letter-spacing: 0.02em;
color: #aeb9c4; text-align: center;
}
/* The cell over the frozen Hero column continues the hero divider (0.30) up
through the super-category row. (Beats the shared .cat-head:first-child 0.22
rule via the extra .heroes-dyn-table class + later source order.) */
.creeps-table.heroes-dyn-table thead tr.cat-row th.hd-hero-cat {
border-right: 2px solid rgba(170, 220, 240, 0.30);
}
/* Cell holding one dyn-cell pill (or the empty-diamond pseudo). */
.heroes-dyn-table td.hd-cell {
text-align: center;
vertical-align: middle;
padding: 2px;
line-height: 0;
}
/* Trailing spacer column: fills the reserved right-edge gutter (where the last
patch column's 2.5× hover-pop overflows) with a clipped slice of an empty
column, so the grid reaches the box edge instead of ending in blank space.
Fixed 24px (= HD_RIGHT_GUTTER in scripts.js); the 28px empty diamond is
left-aligned and clipped by the cell → reads as a column cut off at the edge. */
.creeps-table.heroes-dyn-table th.hd-spacer,
.creeps-table.heroes-dyn-table td.hd-spacer {
width: 24px; min-width: 24px; max-width: 24px;
overflow: hidden;
text-align: left;
}
/* The trailing spacer is pure hover-pop room for the last patch column — render
NOTHING in it (no empty diamond). A faded square still read as "the grid continues
past the last patch"; an invisible gutter just lets the grid end cleanly. */
.creeps-table.heroes-dyn-table td.hd-spacer::after { display: none; }
/* Bigger pill in the matrix than on patch pages (28px vs 24px) — more legible
in a dense grid; scoped so patch pages keep their size. */
.heroes-dyn-table .dyn-cell-wrap { width: 28px; height: 28px; }
/* PERF: empty cells are the bulk of the ~14k-cell grid. A flat fill (NO
box-shadow, no opacity layer) paints far cheaper than thousands of inset
shadows — the main scroll-jank source on this page. */
.heroes-dyn-table td.hd-cell.hd-empty::after {
content: ''; display: inline-block; width: 28px; height: 28px; border-radius: 4px;
background: rgba(12, 14, 19, 0.72);
}
/* Outside the item's lifespan (items_dyn): the item wasn't in the game in this
patch — either not added yet, or already removed. NO empty-slot square; just a
tiny faint dot so the live span reads as a clear band of slots flanked by
"n/a" gaps. Flat fill (no shadow) keeps the big grid cheap to paint. */
.heroes-dyn-table td.hd-cell.hd-absent::after {
content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
background: rgba(125, 135, 155, 0.16);
}
/* In a marked row the n/a dots STAY visible — they carry meaning (the item
didn't exist in those patches), unlike the decorative empty diamonds (below)
which drop out. Bump the alpha a touch so the faint dot reads on the gold band. */
.heroes-dyn-table tbody tr.row-marked td.hd-cell.hd-absent::after { background: rgba(150, 160, 180, 0.42); }
/* Buff/nerf-only: a touched cell with no buff/nerf reads as an EMPTY cell —
flat fill, no glassy pill, no hover pop. Hover still fires the tooltip. */
.heroes-dyn-table .dyn-cell-wrap.bn-empty .dyn-cell,
.heroes-dyn-table .dyn-cell-wrap.bn-empty:hover .dyn-cell {
background: rgba(12, 14, 19, 0.72);
box-shadow: none;
filter: none;
transform: none;
}
/* RULE (all tables): the gold row-mark must read as ONE uniform band + frame
(like Neutral Creeps / Abilities), not per-cell boxes. The decorative empty
diamonds otherwise sit on the gold tint as separate squares — drop their fill
inside a marked row so the tint shows through uniformly (coloured pills stay,
like icons do on the creeps marked row). */
.heroes-dyn-table tbody tr.row-marked td.hd-cell.hd-empty::after { background: transparent; }
/* RULE (all tables): a hovered/zoomed dyn-cell must sit ABOVE the sticky header,
never behind it. The wrap is position:relative; bumping its z-index over the
header (z:50) inside the .creeps-scroll stacking context lifts the 2.5× pop and
its tooltip clear of the pinned header for top rows. */
.heroes-dyn-table .dyn-cell-wrap:hover { z-index: 60; }
/* Reserve room below the grid for the bottom row's 2.5× hover-pop. A scaled
element's box counts toward the scroll container's scrollable overflow, so
when the list is filtered short (no scrollbar) the bottom-row pop extends
past the content and spawns a spurious vertical scrollbar on hover. The pop
grows into this padding instead of past the scrollable edge. (~21px pop
overflow for the 28px→70px cell.) */
.creeps-scroll:has(.heroes-dyn-table) { padding-bottom: 24px; }
/* RULE (all tables): use the shared .creeps-scroll shell AS-IS — NO per-page
left gutter. The subnav (10px), blurb/toolbar (28px) and table (flush) keep
the SAME left positions as Neutral Creeps / Abilities so every Materials page
lines up identically. (An earlier .hd-page padding-left shifted this page's
subnav + table right of the others — removed.) */
.creeps-table .creep-icon-cell img {
width: 48px;
height: 27px;
/* Override the global `img { max-width: 100% }` rule — otherwise the
auto-sized icon column (its is empty, so it starts ~0px wide)
caps the image width to the collapsed cell, leaving a 3px-wide
vertical sliver. max-width: none lets the explicit 48px win and the
column then grows to fit. */
max-width: none;
object-fit: cover;
border-radius: 4px;
background: rgba(139, 148, 158, 0.15);
display: inline-block;
vertical-align: middle;
/* Depth treatment — the bare crops read as flat rectangles otherwise.
A 1px cool rim + soft drop shadow + inner top highlight give the
portrait a "card" dimensionality matching the dark-glass nav. */
border: 1px solid rgba(170, 220, 240, 0.18);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
/* Scale symmetrically about the exact center so the zoomed portrait
stays vertically aligned with the unit name beside it. */
transform-origin: center center;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.creeps-table .creep-icon-cell img:hover {
transform: scale(1.6);
position: relative;
z-index: 30; /* above sticky header + neighbours */
background: #0e1217; /* opaque under the portrait */
box-shadow:
0 3px 8px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 0 0 1px rgba(170, 220, 240, 0.4);
}
/* Last row: grow the zoom UPWARD so the enlarged portrait isn't clipped by the
scroll box / hidden under the horizontal scrollbar at the bottom edge.
(The .creeps-scroll overflow context can't be widened without breaking the
sticky header, so we steer the transform instead.) */
.creeps-table tbody tr:last-child .creep-icon-cell img,
.creeps-table tbody tr:last-child .abil-ico,
.creeps-table tbody tr:last-child .abil-ico-wrap {
transform-origin: center bottom;
}
/* Vertical section separators — a brighter right border grouping the
table into identity | survivability | offense | economy | utility. */
/* Category boundary — left border on the first column of each super-category
(always a Standard column, so it shows in both views). */
.creeps-table th.col-sep,
.creeps-table td.col-sep {
border-left: 2px solid rgba(170, 220, 240, 0.30);
}
/* Sortable headers — click to sort. The ▾ indicator brightens to ▲/▼ on
the active column. */
.creeps-table th.sortable {
cursor: pointer;
user-select: none;
}
.creeps-table th.sortable:hover {
background: #1d2530;
}
/* Sort indicator — thin line arrows (↕ / ↑ / ↓) instead of heavy filled
triangles, for a more refined look. Dim until the column is active. */
/* Sort indicator centering — shared by Neutral Creeps, Unit Abilities and
Mana Items so all three behave identically. The bare ↕/↑/↓ glyphs hang
low on the baseline; vertical-align: middle + a small upward nudge pulls
them onto the header text's optical centre. */
/* Label + arrow both vertical-align:middle so they share ONE midline —
otherwise the uppercase label aligns to its baseline while the arrow
centres on x-height, dropping it below the letters. */
.creeps-table th.sortable .th-label,
.mr-table thead th.sortable .th-label {
vertical-align: middle;
}
.creeps-table th.sortable .sort-ind,
.mr-table thead th.sortable .sort-ind {
margin-left: 4px;
display: inline-block;
vertical-align: middle;
line-height: 1;
position: relative;
/* Centered against the cap-height of large table headers. */
top: -0.04em;
width: 11px;
height: 11px;
/* Coloured via background-color through a PNG mask — neutral default
greyish, gold when the column is actively sorted (site accent #e3c46a). */
background-color: rgba(201, 209, 217, 0.55);
-webkit-mask: url('icons/sort/sort.png') center / contain no-repeat;
mask: url('icons/sort/sort.png') center / contain no-repeat;
}
.creeps-table th.sortable .sort-ind::after,
.mr-table thead th.sortable .sort-ind::after { content: none; }
.creeps-table th.sort-desc .sort-ind,
.creeps-table th.sort-asc .sort-ind,
.mr-table thead th.sort-desc .sort-ind,
.mr-table thead th.sort-asc .sort-ind {
background-color: #e3c46a;
}
.creeps-table th.sort-desc .sort-ind,
.mr-table thead th.sort-desc .sort-ind {
-webkit-mask-image: url('icons/sort/sort-down.png');
mask-image: url('icons/sort/sort-down.png');
}
.creeps-table th.sort-asc .sort-ind,
.mr-table thead th.sort-asc .sort-ind {
-webkit-mask-image: url('icons/sort/sort-up.png');
mask-image: url('icons/sort/sort-up.png');
}
/* Stat cells with a recorded change history get a dotted underline cue +
help cursor, hinting that hover shows the changelog. */
.creeps-table td.has-history,
.mr-table td.has-history {
cursor: help;
text-decoration: underline dotted rgba(170, 220, 240, 0.5);
text-underline-offset: 3px;
}
/* Per-stat changelog tooltip — body-level (escapes the .creeps-scroll
overflow clip), positioned by scripts.js above the hovered cell.
font-size matches the table cells (11.5px). */
.stat-hist-tip {
position: fixed;
z-index: 1100;
pointer-events: none;
display: none;
min-width: 180px;
padding: 7px 11px;
background: rgba(13, 17, 23, 0.97);
border: 1px solid rgba(170, 220, 240, 0.35);
border-radius: 6px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
font-size: 11.5px;
color: #c9d1d9;
text-align: center;
/* Tall histories (e.g. Guardian Greaves) would overflow the viewport.
Cap height and let the tooltip scroll internally; JS clamps the top so
the box never runs off-screen. pointer-events stays none so the wheel
scrolls the page, not the tip — fine, the cap keeps it readable. */
max-height: calc(100vh - 24px);
overflow-y: auto;
}
.stat-hist-tip.is-visible { display: block; }
.stat-hist-tip .stat-chg { padding: 3px 0; }
.stat-hist-tip .stat-chg + .stat-chg {
border-top: 1px solid rgba(139, 148, 158, 0.18);
margin-top: 3px;
}
/* Net first→today summary pinned at the top of the tooltip, divider below. */
.stat-hist-tip .stat-net {
padding: 1px 0 6px;
margin-bottom: 5px;
border-bottom: 1px solid rgba(170, 220, 240, 0.30);
font-weight: 600;
white-space: nowrap;
text-align: center;
font-variant-numeric: tabular-nums;
}
.stat-hist-tip .stat-net-label {
color: #8b949e;
font-size: 0.82em;
text-transform: uppercase;
letter-spacing: 0.6px;
margin-right: 5px;
}
/* Entry header: patch number top-left, date top-right (dd.mm.yy). */
.stat-hist-tip .stat-chg-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 14px;
font-variant-numeric: tabular-nums;
padding-bottom: 2px;
margin-bottom: 2px;
border-bottom: 1px solid rgba(139, 148, 158, 0.14);
}
.stat-hist-tip .chg-patch { font-weight: 600; color: #79c0ff; }
.stat-hist-tip .chg-date { color: #8b949e; font-size: 10px; }
.stat-hist-tip .stat-chg-line {
font-variant-numeric: tabular-nums;
white-space: nowrap;
text-align: left;
margin-top: 1px;
}
.stat-hist-tip .chg-label { color: #adbac7; }
.stat-hist-tip .chg-cycle { color: #c9d1d9; padding: 0 3px; }
/* Ability tags — same palette as the changelog NEW/DEL badges. */
.stat-hist-tip .chg-tag {
display: inline-block;
margin-left: 6px;
padding: 0 5px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.04em;
border: 1px solid;
border-radius: 4px;
vertical-align: 1px;
}
.stat-hist-tip .chg-tag.added { color: #9a7f4d; background: rgba(220,175,95,0.06); border-color: rgba(220,175,95,0.22); }
.stat-hist-tip .chg-tag.removed { color: #a86060; background: rgba(180,70,70,0.07); border-color: rgba(180,70,70,0.25); }
.stat-hist-tip .chg-tag.replaced { color: #7f9cc4; background: rgba(120,150,200,0.07); border-color: rgba(120,150,200,0.25); }
/* % delta — muted green for an increase (stat up = buff), muted red for
a decrease. Less saturated than the changelog badges to read softer in
the tooltip. */
.stat-hist-tip .stat-pct { font-weight: 600; margin-left: 7px; }
.stat-hist-tip .stat-pct.up { color: #7fb88c; }
.stat-hist-tip .stat-pct.down { color: #cf8b8b; }
.stat-hist-tip .stat-pct.flat { color: #8b949e; }
/* Per-column value tints. */
.creeps-table td.col-hp_regen { color: #9ae66e; } /* light green (салатовый) */
.creeps-table td.col-mp_regen { color: #6fc3ec; } /* light blue (голубоватый) */
.mr-table.hs-table td.hs-col-hpr { color: #9ae66e; }
.mr-table.hs-table td.hs-col-mpr { color: #6fc3ec; }
.creeps-table td.col-hp_regen.regen-zero,
.mr-table.hs-table td.hs-col-hpr.regen-zero { color: rgba(154, 230, 110, 0.42); }
.creeps-table td.col-mp_regen.regen-zero,
.mr-table.hs-table td.hs-col-mpr.regen-zero { color: rgba(111, 195, 236, 0.42); }
.creeps-table td.col-gold { color: #e3b341; } /* gold (золотой) */
.creeps-table td.col-xp { color: #8bb8d6; } /* dusty blue (пыльно-голубой) */
/* Attack-type value colors. */
.creeps-table td.atk-basic { color: #56d364; } /* "Обычный" — green */
.creeps-table td.atk-pierce { color: #b18cd9; } /* "Проникающий" — muted purple */
/* Tier-break: thicker top border between level groups (Ур. changes). */
.creeps-table tr.tier-break td {
border-top: 2px solid rgba(170, 220, 240, 0.55);
}
/* "Copied" toast — fixed-positioned near the clicked icon, fades in
quickly then drifts up and out. JS positions it and toggles
.is-visible; the transition handles the fade + lift. */
.copy-toast {
position: fixed;
transform: translate(-50%, -100%) translateY(4px);
z-index: 1100;
pointer-events: none;
padding: 4px 10px;
font-size: 11.5px;
font-weight: 600;
color: #e6edf3;
background: rgba(13, 17, 23, 0.92);
border: 1px solid rgba(170, 220, 240, 0.35);
border-radius: 5px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.18s ease, transform 0.35s ease;
}
.copy-toast.is-visible {
opacity: 1;
transform: translate(-50%, -100%) translateY(-4px);
}
.creeps-table thead th {
position: sticky;
top: 0; /* sticky to the scroll box (which pins under the nav) */
z-index: 50; /* above body cells AND the hover-zoomed icon/ability
(z 30/40 below), so a hovered row near the top never
paints over the pinned header */
background: #161b22;
color: #e6edf3;
font-weight: 600;
text-align: center;
padding: 6px 6px;
border-bottom: 1px solid rgba(139, 148, 158, 0.35);
white-space: nowrap;
line-height: 1.2;
}
/* Subscript header sub-label (EHP "phys"/"mag") — small dim text set to
the bottom-right of the main word, like a formula subscript, so the
column stays narrow without a full second line. */
.creeps-table thead th .th-sub {
font-size: 8.5px;
font-weight: 400;
color: #8b949e;
margin-left: 1px;
/* Nudge down like a subscript via relative offset + zero line-height so the
sub-label does NOT grow the header's line box. vertical-align:sub would
enlarge the row only where EHP columns appear (Expanded), making the whole
header taller than in Standard — the cause of the height "jump" on toggle. */
display: inline-block;
position: relative;
top: 2px;
line-height: 0;
}
.creeps-table tbody td {
padding: 5px 8px;
border-bottom: 1px solid rgba(139, 148, 158, 0.12);
/* Single-line cells: every value is short (numbers, %, "Ближняя (100)",
ability dnames like "Envenomed Weapon"). nowrap lets table-layout:
auto size each column to the widest single-line content, so the
browser picks ideal widths and nothing wraps awkwardly. */
white-space: nowrap;
vertical-align: middle;
line-height: 1.3;
}
/* Row hover tint on the | (not the | ) so cell-specific colours — Damage
Type tints, etc. — paint on top and stay visible; the hover shows through
transparent cells and underneath the semi-transparent coloured ones. */
.creeps-table tbody tr:hover {
background: rgba(56, 139, 253, 0.08);
}
/* Click-toggled row mark — matches the Mana Items style: gold inset frame
around the whole row + soft tint, no fade animation. Single-select
(clicking another row moves the mark). */
.creeps-table tbody tr.row-marked > td {
box-shadow:
inset 0 2px 0 rgba(231, 196, 106, 0.95),
inset 0 -2px 0 rgba(231, 196, 106, 0.95);
background-image: linear-gradient(rgba(231, 196, 106, 0.12),
rgba(231, 196, 106, 0.12));
}
.creeps-table tbody tr.row-marked > td:first-child {
box-shadow:
inset 2px 0 0 rgba(231, 196, 106, 0.95),
inset 0 2px 0 rgba(231, 196, 106, 0.95),
inset 0 -2px 0 rgba(231, 196, 106, 0.95);
}
.creeps-table tbody tr.row-marked > td:last-child {
box-shadow:
inset -2px 0 0 rgba(231, 196, 106, 0.95),
inset 0 2px 0 rgba(231, 196, 106, 0.95),
inset 0 -2px 0 rgba(231, 196, 106, 0.95);
}
/* Sticky identity cells inside a marked row pick up the same tint without
the inset frame (the frame would double-paint through the sticky cell). */
.creeps-table tbody tr.row-marked .sticky-col { --sticky-bg: #2b251a; }
.creeps-table tbody tr.row-marked:hover .sticky-col { --sticky-bg: #34291e; }
/* A marked row's sticky identity cell must keep its opaque fill UNDERNEATH the
gold frame. The generic `.row-marked > td:first-child/:last-child` frame is a
box-shadow, and box-shadow is a single property — so it REPLACES the sticky
cell's `inset 0 0 0 9999px var(--sticky-bg)` fill that normally covers the
collapsed-border seam. Without the fill, the seam bled at the column junction
(looked like a small gap between Hero and the next column). Re-add the fill as
the LAST shadow (painted beneath the earlier gold frame lines). */
.creeps-table tbody tr.row-marked > td.sticky-col {
box-shadow:
inset 0 2px 0 rgba(231, 196, 106, 0.95),
inset 0 -2px 0 rgba(231, 196, 106, 0.95),
inset 0 0 0 9999px var(--sticky-bg);
}
.creeps-table tbody tr.row-marked > td.sticky-col:first-child {
box-shadow:
inset 2px 0 0 rgba(231, 196, 106, 0.95),
inset 0 2px 0 rgba(231, 196, 106, 0.95),
inset 0 -2px 0 rgba(231, 196, 106, 0.95),
inset 0 0 0 9999px var(--sticky-bg);
}
.creeps-table tbody tr.row-marked > td.sticky-col:last-child {
box-shadow:
inset -2px 0 0 rgba(231, 196, 106, 0.95),
inset 0 2px 0 rgba(231, 196, 106, 0.95),
inset 0 -2px 0 rgba(231, 196, 106, 0.95),
inset 0 0 0 9999px var(--sticky-bg);
}
/* Legacy .row-flash class (one-shot fade) is no longer applied by JS but
the keyframes still live below — harmless dead CSS, retained so any
third-party styling doesn't break. */
/* First column (unicode tier dots) — centered glyph, smaller letter-spacing. */
.creeps-table th:first-child,
.creeps-table td:first-child {
text-align: center;
font-family: 'Segoe UI Symbol', 'Apple Color Emoji', monospace;
letter-spacing: 1px;
white-space: normal;
}
/* Per-tier row tint — lighter for top picks, darker for fallback. */
.creeps-table tr.tier-1 td:first-child { color: #56d364; } /* best pick — green */
.creeps-table tr.tier-2 td:first-child { color: #d29922; } /* situational — amber */
.creeps-table tr.tier-3 td:first-child { color: #db6d28; } /* rare/early — orange */
.creeps-table tr.tier-4 td:first-child { color: #f85149; } /* worst — red */
/* Tier legend footer rows (no data, just label in column 3). */
.creeps-table tr.creeps-footer td {
background: rgba(139, 148, 158, 0.06);
color: #8b949e;
font-style: italic;
border-bottom: none;
}
.creeps-table tr.creeps-footer td:nth-child(3) {
font-style: normal;
color: #c9d1d9;
font-weight: 600;
padding-left: 16px;
}
/* Notes section below the creeps table — long prose cells the spreadsheet
author parked in random narrow columns get extracted here so they read
as paragraphs instead of 1700px-tall ribbons. */
.creeps-notes {
margin-top: 28px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: 16px;
}
.creeps-notes > h2 {
grid-column: 1 / -1;
margin: 0 0 4px;
font-size: 18px;
font-weight: 600;
color: #e6edf3;
}
.creeps-note {
background: rgba(22, 27, 34, 0.6);
border: 1px solid rgba(139, 148, 158, 0.2);
border-radius: 6px;
padding: 12px 14px;
font-size: 12.5px;
color: #c9d1d9;
line-height: 1.45;
}
.creeps-note h3 {
margin: 0 0 8px;
font-size: 13.5px;
color: #e6edf3;
font-weight: 600;
}
.creeps-note p {
margin: 0 0 8px;
}
.creeps-note p:last-child { margin-bottom: 0; }
.creeps-note strong {
color: #79c0ff;
font-weight: 600;
}
/* ───────────────────────── MANA REGEN TABLE ───────────────────────────── */
.mr-blurb {
/* Spans the full page width on every table page (Neutral Creeps /
Neutral Abilities / Mana Items) — no max-width clamp. The toolbar's
padding-top below handles the gap to the View / Price controls. */
margin: 4px 0 0;
font-size: 13px;
line-height: 1.55;
color: #8b949e;
}
.mr-blurb strong { color: #c9d1d9; font-weight: 600; }
.mr-blurb code {
background: rgba(110, 118, 129, 0.12);
padding: 1px 5px;
border-radius: 3px;
font-size: 12px;
color: #c9d1d9;
}
.mr-table {
width: 100%;
border-collapse: collapse;
/* Match the Neutral Creeps / Unit Abilities tables exactly (11.5px). */
font-size: 11.5px;
font-variant-numeric: tabular-nums;
/* Fixed layout: the Item column gets a set width, every numeric column then
splits the remaining page width EQUALLY (no auto-sized narrow/wide mix). */
table-layout: fixed;
}
/* Item column — wide enough for the icon + longest item name. */
.mr-table .mr-col-name,
.mr-table .mr-name {
width: 230px;
}
/* The seven numeric columns share the rest equally (table-layout: fixed gives
every width-less column an equal slice). Keep their text centred + clipped
cleanly if a header would otherwise overflow its equal slice. */
.mr-table thead th:not(.mr-col-name) {
white-space: normal;
overflow-wrap: anywhere;
}
.mr-table thead th,
.mr-table tbody td {
/* Faint vertical separator on the left edge — matches Neutral Creeps /
Unit Abilities table convention. Skipped on the first column below. */
border-left: 1px solid rgba(170, 220, 240, 0.12);
}
.mr-table thead th:first-child,
.mr-table tbody td:first-child {
border-left: none;
}
.mr-table thead th {
/* Typography matched 1:1 to .creeps-table thead th — inherits the 11.5px
table font size (no override), same weight, colour, padding, casing,
line-height so all three tables share one header design. */
background: #161b22;
color: #e6edf3;
font-weight: 600;
text-align: center;
padding: 6px 6px;
line-height: 1.2;
/* Cyan bottom rim + drop shadow drawn via box-shadow, NOT border-bottom:
Chrome drops collapsed borders on sticky cells mid-scroll (the line
vanished). An inset box-shadow repaints reliably while stuck. */
box-shadow:
inset 0 -2px 0 rgba(120, 200, 235, 0.85),
0 4px 10px rgba(0, 0, 0, 0.45);
cursor: pointer;
user-select: none;
position: sticky;
/* Mana Items now lives in the same .creeps-scroll box as Neutral Creeps:
the box is the scroll container, so the header pins at the box's top.
The subnav, blurb and toolbar scroll away above it (they're in-flow /
sticky-left only). */
top: 0;
z-index: 35; /* above the hover-zoomed item icon (z 30) so a
top-row icon pop-out never paints over the header,
but below toolbar/subnav/nav (z 80/90/100) */
white-space: nowrap;
}
/* Toolbar pins right under the site nav. The painted background extends a
bit BELOW the buttons (padding-bottom) so that when the headers pin under
it there's a visible gap — not the buttons sitting flush on the table.
JS measures the toolbar's full height (incl. this padding) into
--mr-thead-top, so the headers pin exactly at the painted bottom edge. */
.mr-toolbar {
/* Was position:sticky — user wants only the site nav and the table category
headers to stay pinned while scrolling. The Price filter + Hide Active
toggle now scroll away with the page. The table thead still sticks at
var(--mr-thead-top) so column names remain visible. */
position: relative;
z-index: 5;
background: #0a0e13;
box-sizing: content-box;
/* Unified breathing room: 28px above the toolbar + 14px below, matching
the Neutral Creeps / Neutral Abilities / Calendar pages. JS reads the
resulting total height into --mr-thead-top automatically. */
margin-bottom: 0;
padding: 28px 0 14px;
}
/* OPAQUE hover background — a translucent one let table rows scrolling
beneath the sticky header bleed through. This is the #161b22 base blended
with the old rgba(48,54,61,0.5) tint, fully opaque. */
.mr-table thead th:hover { background: #232930; }
/* Sort indicator — identical glyph + dim/active logic to the creeps-table
convention: ↕ (neutral, dim), ↓ (desc, active), ↑ (asc, active). */
/* (sort-ind centering is defined once in the shared rule above.) */
/* Denser divider splitting raw stats (Price…Mana regen) from the computed
columns (Cost per regen onward). */
.mr-table thead th.mr-col-cost_per_regen,
.mr-table tbody td.mr-sep {
border-left: 2px solid rgba(170, 220, 240, 0.40);
}
/* sort-ind look (mask + colour) is defined once in the shared rule above. */
.mr-table tbody td {
padding: 6px 10px;
border-bottom: 1px solid rgba(48, 54, 61, 0.5);
text-align: center;
color: #c9d1d9;
}
.mr-table tbody tr:hover { background: rgba(48, 54, 61, 0.3); }
/* Item-name cell: icon stays in a fixed-width left column so every icon
lines up vertically. Name + dropdown arrow share the right region as
an inline flex group — the arrow sits flush against the name so it
reads as "expand THIS item" rather than floating at the cell edge. */
.mr-table .mr-name {
display: grid;
grid-template-columns: 40px 1fr;
align-items: center;
/* Room so the hover-zoomed icon (.mr-ico scales 1.8) doesn't cover the name
— same fix as Neutral Abilities' .ua-ability-inner gap. */
gap: 16px;
text-align: left;
min-width: 230px;
}
.mr-name-body {
display: inline-flex;
align-items: center;
gap: 6px;
}
.mr-name-text {
text-align: left;
white-space: nowrap;
}
.mr-name-text { color: #e6edf3; font-weight: 500; }
/* Engine-constant inline chip (+12 max mana, +0.05 mana regen per Int).
Visually it's just a bold value with the same dotted-underline cue used
by `.has-history` table cells — hover triggers the stat-hist-tip popup
driven by data-hist. Per-patch source: Liquipedia's
/Intelligence/Changelogs (hardcoded engine constants are not in our
scraped patchnotes_english.txt). */
.mr-const {
font-weight: 600;
color: #c9d1d9;
}
.mr-const.has-history {
cursor: help;
text-decoration: underline dotted rgba(170, 220, 240, 0.5);
text-underline-offset: 3px;
}
/* Match the patch-page convention for item icons (rectangular 50×36 cover) */
.mr-ico {
width: 36px;
height: 26px;
object-fit: cover;
border-radius: 3px;
flex-shrink: 0;
box-shadow: 0 0 0 1px rgba(170, 220, 240, 0.18);
transform-origin: center center;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
/* Hover-zoom the item icon, mirroring the ability-icon pop-out (same scale +
centre origin as .abil-ico in the other tables) — symmetric expansion so it
doesn't dump itself onto the item name to the right. */
.mr-ico:hover {
transform: scale(1.8);
position: relative;
z-index: 30;
box-shadow:
0 3px 8px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(170, 220, 240, 0.4);
}
.mr-ico-blank {
background: rgba(110, 118, 129, 0.15);
border: 1px solid rgba(110, 118, 129, 0.3);
box-shadow: none;
}
.mr-dash { color: #6e7681; }
/* Mana-regen multiplier chip (Kaya = +30%, etc). Sits inline next to the
flat regen number. */
.mr-mult-chip {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
background: rgba(170, 220, 240, 0.12);
border: 1px solid rgba(170, 220, 240, 0.32);
border-radius: 10px;
font-size: 10.5px;
color: #79c0ff;
font-weight: 600;
vertical-align: middle;
}
/* "Hide Active" toolbar toggle uses the existing ua-upgrades-toggle pill
styling; rows tagged .mr-active-row collapse via display: none. */
.mr-table tbody tr.mr-active-row.mr-hide-active { display: none; }
.mr-active-row .mr-name-text { color: #a8b3bd; font-style: italic; }
/* Price range combo — one bordered container holds both inputs + the
clear-X so they read as a single control. Inputs are borderless inside
(focus ring is drawn on the parent). */
.mr-price-range {
display: inline-flex;
align-items: center;
background: #161b22;
border: 1px solid #30363d;
border-radius: 5px;
transition: border-color 0.12s;
}
.mr-price-range:focus-within { border-color: #58a6ff; }
.mr-price-input {
width: 56px;
background: transparent;
border: none;
color: #c9d1d9;
padding: 4px 6px;
font-size: 12.5px;
font-variant-numeric: tabular-nums;
text-align: center;
outline: none;
}
.mr-price-input::placeholder { color: #6e7681; }
.mr-price-input::-webkit-outer-spin-button,
.mr-price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mr-price-input { -moz-appearance: textfield; }
.mr-price-sep { color: #6e7681; font-size: 12px; padding: 0 2px; user-select: none; }
/* X button — flush against the right edge of the combo, no own border.
`hidden` attr on render hides it until at least one bound is set; JS
un-hides on input. */
.mr-price-clear {
border: none;
background: transparent;
color: #8b949e;
cursor: pointer;
padding: 4px 6px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.12s;
border-left: 1px solid #30363d;
}
.mr-price-clear:hover { color: #f85149; }
.mr-price-clear[hidden] { display: none; }
.mr-table tbody tr.mr-filtered-out { display: none; }
.mr-table tbody tr.mr-search-out { display: none; }
.mr-table tbody tr.mr-attack-out,
.creeps-table tbody tr.mr-attack-out {
display: none;
}
/* Clicked-row highlight — yellow outline around the ENTIRE row, not each
cell. Achieved with inset box-shadows on the TDs: top / bottom on all
cells, left edge on the first cell, right edge on the last cell —
together they form one continuous gold frame around the row. */
.mr-table tbody tr.mr-row-selected > td {
box-shadow:
inset 0 2px 0 rgba(231, 196, 106, 0.95),
inset 0 -2px 0 rgba(231, 196, 106, 0.95);
background-image: linear-gradient(rgba(231, 196, 106, 0.10),
rgba(231, 196, 106, 0.10));
}
.mr-table tbody tr.mr-row-selected > td:first-child {
box-shadow:
inset 2px 0 0 rgba(231, 196, 106, 0.95),
inset 0 2px 0 rgba(231, 196, 106, 0.95),
inset 0 -2px 0 rgba(231, 196, 106, 0.95);
}
.mr-table tbody tr.mr-row-selected > td:last-child {
box-shadow:
inset -2px 0 0 rgba(231, 196, 106, 0.95),
inset 0 2px 0 rgba(231, 196, 106, 0.95),
inset 0 -2px 0 rgba(231, 196, 106, 0.95);
}
.mr-table tbody tr.mr-row-selected .mr-name-text { color: #fff8e0; }
/* ───────────────────────── HERO STATS TABLE (heroes_stats.html) ───────────
mr-table skin (flat sort / heatmap / search / stat-hist tooltips reused
via the shared classes+ids) + hero-specific bits: sticky hero column,
Standard/Advanced column modes, per-attribute level-30 expanders. */
/* Mode visibility. Expanded-only columns hide until the View dropdown adds
.show-adv to the table. */
/* Extras hidden in Base & Starting; visible only in Expanded. */
.hs-table .hs-extra { display: none; }
.hs-table.hs-mode-expanded .hs-extra { display: table-cell; }
/* Hero Stats uses the same two-row category header pattern as Neutral Creeps,
but stays on the mr-table sorter/heatmap stack. */
.mr-table.hs-table thead tr.cat-row th.cat-head {
position: sticky;
top: 0;
z-index: 52;
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #9fb0c0;
font-weight: 700;
background: #161b22;
padding: 3px 4px;
box-shadow: 0 6px 0 0 #161b22;
cursor: default;
user-select: none;
}
.mr-table.hs-table thead tr.col-row th {
top: calc(var(--cat-row-h, 0px) - 2px);
z-index: 50;
border-bottom: none;
box-shadow:
inset 0 -2px 0 rgba(120, 200, 235, 0.85),
0 4px 10px rgba(0, 0, 0, 0.45),
0 -14px 0 0 #161b22;
}
.mr-table.hs-table thead tr.cat-row .cat-head + .cat-head {
border-left: 2px solid rgba(170, 220, 240, 0.22);
}
.mr-table.hs-table th.col-sep,
.mr-table.hs-table td.col-sep {
border-left: 2px solid rgba(170, 220, 240, 0.30);
}
.mr-table.hs-table thead th .th-sub {
display: inline-block;
position: relative;
top: 2px;
margin-left: 1px;
font-size: 8.5px;
line-height: 0;
color: #8b949e;
font-weight: 400;
}
/* Sticky hero column (single frozen column → plain CSS sticky, no JS lefts).
Solid backgrounds so scrolled columns disappear under it; header corner
sits above both axes' pinned bars (z 51 > th 50). */
.mr-table.hs-table td.hs-name {
position: sticky;
left: 0;
z-index: 3;
background: #11161d;
}
/* The shared .mr-name rule sets display:grid on the | . A grid (or flex) |
drops out of the table's automatic ROW-HEIGHT equalisation, so the icon-tall
hero cell rendered a different height than the stat cells and the rows visibly
mis-aligned (a vertical shift down the Hero column). Keep the hero cell a real
table-cell and lay the icon + name out inline so it shares the row height with
every stat cell; vertical-align:middle centres all cells consistently. */
.mr-table.hs-table td.hs-name {
display: table-cell;
vertical-align: middle;
white-space: nowrap;
}
.mr-table.hs-table td.hs-name .hs-ico {
display: inline-block;
vertical-align: middle;
margin-right: 16px;
}
.mr-table.hs-table td.hs-name .mr-name-body { vertical-align: middle; }
.mr-table.hs-table tbody td { vertical-align: middle; }
/* table-layout:fixed derives column widths from the FIRST row (the thead) —
the body's .mr-name width rule doesn't reach the th, so without this the
Hero HEADER was narrower than the hero column. */
.mr-table.hs-table th.hs-name { width: 230px; }
.mr-table.hs-table th.hs-col-attr { width: 56px; }
.mr-table.hs-table thead th.hs-name {
position: sticky;
left: 0;
z-index: 51;
}
.mr-table.hs-table thead tr.cat-row th.cat-head:first-child {
z-index: 53;
}
.mr-table.hs-table tbody tr:hover td.hs-name { background: #1a212b; }
/* Selected-row gold frame on the STICKY Hero cell.
The generic `.mr-row-selected > td(:first-child)` frame is an inset box-shadow,
and Chromium renders box-shadow OFFSET on `position:sticky` cells (the same
quirk the `.sticky-frame` overlay exists for) — so the gold top/bottom lines
stepped down at the Hero↔Attr seam. Draw the frame as background-gradient
layers instead (left + top + bottom bars + gold tint over the sticky base);
backgrounds paint correctly on sticky cells, so the lines align with the
non-sticky cells' box-shadow frame. The base `td.hs-name` background rule wins
over `.mr-row-selected > td`'s gradient via the `background` shorthand, so we
re-assert the whole stack here at higher specificity. */
.mr-table.hs-table tbody tr.mr-row-selected td.hs-name {
box-shadow: none;
background:
linear-gradient(rgba(231, 196, 106, 0.95), rgba(231, 196, 106, 0.95)) left / 2px 100% no-repeat,
linear-gradient(rgba(231, 196, 106, 0.95), rgba(231, 196, 106, 0.95)) top / 100% 2px no-repeat,
linear-gradient(rgba(231, 196, 106, 0.95), rgba(231, 196, 106, 0.95)) bottom / 100% 2px no-repeat,
linear-gradient(rgba(231, 196, 106, 0.12), rgba(231, 196, 106, 0.12)),
#11161d;
/* MUST come AFTER the `background` shorthand (which resets origin to its
padding-box default). border-box origin puts the top/bottom bars on the
cell's full-height edges, matching the box-shadow frame on the other
columns — padding-box would inset them by the cell's vertical padding and
draw a SHORTER gold box than the rest of the row. */
background-origin: border-box;
}
.mr-table.hs-table tbody tr.mr-row-selected:hover td.hs-name {
background:
linear-gradient(rgba(231, 196, 106, 0.95), rgba(231, 196, 106, 0.95)) left / 2px 100% no-repeat,
linear-gradient(rgba(231, 196, 106, 0.95), rgba(231, 196, 106, 0.95)) top / 100% 2px no-repeat,
linear-gradient(rgba(231, 196, 106, 0.95), rgba(231, 196, 106, 0.95)) bottom / 100% 2px no-repeat,
linear-gradient(rgba(231, 196, 106, 0.16), rgba(231, 196, 106, 0.16)),
#1a212b;
background-origin: border-box;
}
/* Hero portrait (16:9) in the name cell — same slot the item icon uses. */
.hs-ico {
width: 40px;
height: 23px;
object-fit: cover;
border-radius: 3px;
display: block;
}
.hs-innate-mini {
width: 14px;
height: 14px;
margin-left: 6px;
vertical-align: -2px;
opacity: 0.9;
filter: drop-shadow(0 0 2px rgba(10, 12, 16, 0.6));
}
.hs-innate-mini.is-hidden {
display: none;
}
/* Primary-attribute icon cell */
.hs-attr-cell { padding: 4px 6px; }
.hs-attr-ico {
width: 20px;
height: 20px;
display: block;
margin: 0 auto;
}
/* Expanded layout grows the table HORIZONTALLY (Neutral Creeps convention) —
auto layout + max-content width so extra columns add width and the
.creeps-scroll box scrolls sideways, instead of fixed-layout squeezing
every column narrower until headers clip. */
.mr-table.hs-table {
table-layout: auto;
width: max-content;
min-width: 100%;
}
/* Even grid: every numeric column shares one width floor; headers never
wrap or clip — a longer header (Attack Range) widens its own column. */
.mr-table.hs-table thead th {
white-space: nowrap;
}
.mr-table.hs-table thead th:not(.hs-name):not(.hs-col-attr) {
min-width: 68px;
}
.mr-table.hs-table tbody td {
white-space: nowrap;
}
/* ============================================================================
TERRAIN COMPARE (terrain.html — Materials » Terrain)
A before/after swipe slider over two pixel-aligned map renders + the patch's
Terrain Changes list. The NEW map overlays the OLD one and is revealed
left-to-right via clip-path up to --pos (set on .tc-stage by scripts.js
terrainCompareInit). Gold/leather handle matches the index + nav buttons.
========================================================================= */
.terrain-wrap {
display: flex;
flex-wrap: wrap;
gap: 24px;
align-items: flex-start;
padding: 16px 28px 30px;
}
.terrain-compare-col {
flex: 1 1 540px;
max-width: 720px;
margin: 0 auto;
}
.terrain-compare { width: 100%; }
.tc-stage {
--pos: 50%;
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border: 2px solid #e3c46a;
border-radius: 8px;
overflow: hidden;
background: #11140f;
box-shadow:
inset 0 1px 0 rgba(190, 225, 240, 0.08),
0 6px 22px rgba(0, 0, 0, 0.5);
cursor: grab;
touch-action: none; /* JS owns the pointer drag — no scroll hijack */
user-select: none;
-webkit-user-select: none;
}
.tc-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
/* fill (not cover) so the map stretches to the stage box exactly like the
SVG overlay (preserveAspectRatio="none") — keeps tree/camp markers aligned
even if the stage isn't a perfect square. */
object-fit: fill;
display: block;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
}
/* NEW map + its change markers revealed from the left edge up to the handle.
clip-path is compositor-friendly so the wipe stays smooth while dragging.
Clipping the whole layer (not just the img) means the markers reveal together
with the new terrain. */
.tc-new-layer {
position: absolute;
inset: 0;
clip-path: inset(0 calc(100% - var(--pos)) 0 0);
will-change: clip-path;
}
.tc-tag {
position: absolute;
top: 10px;
z-index: 3;
padding: 1px 9px;
font-family: 'Jersey 10', monospace;
font-size: 16px;
letter-spacing: 0.5px;
color: #f4e6bf;
background: rgba(20, 16, 9, 0.78);
border: 1px solid rgba(227, 196, 106, 0.6);
border-radius: 4px;
pointer-events: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.tc-tag-old { left: 10px; }
.tc-tag-new { right: 10px; }
.tc-handle {
position: absolute;
top: 0;
bottom: 0;
left: var(--pos);
width: 44px;
transform: translateX(-50%);
will-change: transform;
display: flex;
align-items: center;
justify-content: center;
z-index: 4;
cursor: grab;
touch-action: none;
}
.tc-line {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
transform: translateX(-50%);
background: #e3c46a;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.65);
}
.tc-grip {
position: relative;
width: 38px;
height: 38px;
border-radius: 50%;
border: 2px solid #e3c46a;
background: linear-gradient(180deg, #3b2e1d 0%, #2a2014 100%);
box-shadow:
inset 0 1px 0 rgba(190, 225, 240, 0.12),
0 4px 12px rgba(0, 0, 0, 0.55);
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
transition: filter 0.15s ease, box-shadow 0.15s ease;
}
/* Slider arrows use the shared pixel-triangle nav-arrow design (same chunky
gold triangle as .back-to-top / .version-nav-arrow). See the "Navigation
arrows" rule in AGENTS.md. */
.tc-chev {
width: 10px;
height: 14px;
background-repeat: no-repeat;
background-position: center;
background-size: auto 13px;
image-rendering: pixelated;
}
.tc-chev-l {
background-image: url('data:image/svg+xml;utf8,');
}
.tc-chev-r {
background-image: url('data:image/svg+xml;utf8,');
}
.tc-handle:hover .tc-grip { filter: brightness(1.16); }
.tc-handle:focus-visible { outline: none; }
.tc-handle:focus-visible .tc-grip {
box-shadow:
0 0 0 3px rgba(227, 196, 106, 0.45),
inset 0 1px 0 rgba(190, 225, 240, 0.12);
}
/* While actively dragging, hide the I-beam everywhere + brighten the grip. */
.tc-stage.is-dragging { cursor: grabbing; }
.tc-stage.is-dragging .tc-grip { filter: brightness(1.22); }
/* ---- change list beside / below the slider ---- */
.terrain-list-box {
flex: 1 1 360px;
min-width: 290px;
}
/* Heading row = the patch picker (as the version) + "Terrain Changes" label.
Sized to the map toolbar's footprint so the heading sits on the toolbar's
horizontal line and the first change row lines up with the map's top edge:
28px control height (matches .tc-controls-bar's 28px buttons) + 10px bottom
gap (matches the toolbar's 10px bottom padding). */
.terrain-list-head {
display: flex;
align-items: center;
gap: 10px;
height: 28px; /* HARD-capped to the toolbar's control height — the
Jersey label's tall line-box must not grow the row
(it just centers/overflows), so the first change row
stays at 28px + 10px = the map's top edge. */
margin: 0 0 10px;
line-height: 1;
}
.terrain-list-head-label {
font-family: 'Jersey 25', 'Jersey 10', sans-serif;
font-weight: 400;
font-size: 24px;
letter-spacing: 0.5px;
color: #e3c46a;
}
.terrain-list { padding-left: 4px; }
.terrain-list li { padding: 3px 0; }
/* First change row meets the map's TOP edge: drop the list's 3px top margin
(from ul.changes) and the first row's 3px top padding — together they pushed
the first tag ~6px below the map's top border. Specificity beats ul.changes. */
.terrain-list.changes { margin-top: 0; }
.terrain-list > li:first-child { padding-top: 0; }
/* Nudge the first change row up so it sits flush with the map's top edge. */
.terrain-list-pane { margin-top: -2px; }
/* ---- tree + camp overlays (SVG), toggled by the top-bar buttons ---- */
/* Each SVG fills the stage; viewBox 0..1280 == map native px. pointer-events
off so hover/click reach the stage. Hidden until .show-trees / .show-camps
are set on .terrain-compare. */
.tc-markers {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.tm-layer { opacity: 0; transition: opacity 0.15s ease; }
.terrain-compare.show-trees .tm-layer-trees,
.terrain-compare.show-camps .tm-layer-camps,
.terrain-compare.show-towers .tm-layer-towers,
.terrain-compare.show-lotus .tm-layer-lotus,
.terrain-compare.show-twinGates .tm-layer-twinGates,
.terrain-compare.show-tormentors .tm-layer-tormentors,
.terrain-compare.show-bounty .tm-layer-bounty,
.terrain-compare.show-power .tm-layer-power,
.terrain-compare.show-wisdom .tm-layer-wisdom,
.terrain-compare.show-outposts .tm-layer-outposts,
.terrain-compare.show-watchers .tm-layer-watchers,
.terrain-compare.show-roshan .tm-layer-roshan { opacity: 1; }
/* trees — ONE colour everywhere. The 7.40 layout (old side) and 7.41 layout
(new side) are split by the slider, so sweeping reveals how the forest moved. */
/* match the spectral/leamare tree style (styleDefinitions tree.alive) */
.tm-trees-g rect {
fill: rgba(0, 255, 0, 0.3);
stroke: rgba(0, 255, 0, 0.85);
stroke-width: 0.8;
}
/* point-entity markers — recoloured GAME icons (32–40px), shown small + smooth
so they read like the real minimap icons (not hard-pixelated). */
.tm-ent-g image { image-rendering: auto; }
/* every old/new layer splits at the slider (old = right of handle, new = left) */
.tc-trees-old,
.tc-camps-old,
.tm-old { clip-path: inset(0 0 0 var(--pos)); }
.tc-trees-new,
.tc-camps-new,
.tm-new { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
/* ---- control bar ABOVE the map (no longer overlaid — the map is now
edge-to-edge, so the toggles live in their own gold bar that wraps). ---- */
.tc-controls-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 0 0 10px;
}
.tc-sep {
width: 1px;
align-self: stretch;
min-height: 22px;
margin: 0 3px;
background: rgba(227, 196, 106, 0.35);
}
.tc-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
box-sizing: border-box;
padding: 0 10px;
border-radius: 5px;
border: 1px solid rgba(227, 196, 106, 0.55);
background: rgba(20, 16, 9, 0.72);
color: #e6edf3;
font-size: 13px;
cursor: pointer;
user-select: none;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
transition: filter 0.12s ease, background 0.12s ease;
}
/* icon-only square buttons (the layer toggles) */
.tc-btn-icon {
position: relative;
width: 30px;
padding: 0;
justify-content: center;
}
/* Bigger icons INSIDE the toolbar buttons (button size itself unchanged). */
.tc-btn-icon img { width: 22px; height: 22px; }
.tc-btn-zoom img { width: 18px; height: 18px; }
.tc-btn img { image-rendering: pixelated; }
/* layer-toggle icons are the recoloured game icons → smooth, not pixelated */
.tc-layer-btn img { image-rendering: auto; }
.tc-btn:hover { filter: brightness(1.14); }
/* ON = lit gold chip; OFF (default) = greyed + pressed-in */
.tc-btn[aria-pressed="true"] {
background: rgba(227, 196, 106, 0.22);
border-color: #e3c46a;
color: #fff8e0;
}
.tc-btn[aria-pressed="false"] {
background: rgba(28, 28, 28, 0.66);
border-color: rgba(120, 120, 120, 0.5);
color: #9aa0a6;
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.55);
}
.tc-btn[aria-pressed="false"] img { filter: grayscale(0.85) brightness(0.85); }
.tc-inline-loupe { image-rendering: pixelated; vertical-align: -3px; margin: 0 3px 0 1px; }
/* version chips → map corners (OLD bottom-left, NEW top-right) */
.tc-ver {
position: absolute;
z-index: 7;
padding: 1px 9px;
border-radius: 4px;
border: 1px solid rgba(227, 196, 106, 0.6);
background: rgba(20, 16, 9, 0.78);
color: #f4e6bf;
font-family: 'Jersey 10', monospace;
font-size: 17px;
letter-spacing: 0.5px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
pointer-events: none;
}
.tc-ver-new { right: 8px; top: 8px; }
.tc-ver-old { left: 8px; top: 8px; }
/* ---- tree tally + camp note under the change list ---- */
.terrain-counts { margin: 14px 4px 2px; font-size: 13px; color: #8b949e; line-height: 1.55; }
/* Trees + Neutral-camps lines are one logical block — keep them tight (the
default 14px top would read as an empty line between them). */
.terrain-counts + .terrain-counts { margin-top: 1px; }
.terrain-counts b { color: #e6edf3; }
.tm-add-text { color: #6fe089; font-weight: 600; }
.tm-rem-text { color: #ff7a7a; font-weight: 600; }
/* ---- data-source credit under the slider (centred on the map) ---- */
.tc-source {
margin: 12px 2px 0;
font-size: 12px;
line-height: 1.5;
color: #6e7681;
text-align: center;
}
.tc-source a {
color: #e3c46a;
text-decoration: none;
border-bottom: 1px dotted rgba(227, 196, 106, 0.45);
}
.tc-source a:hover { border-bottom-color: #e3c46a; }
/* ---- patch picker (lives in the change-list heading) + per-patch panes ---- */
/* The picker reuses the calendar year-picker structure but in the terrain
page's GOLD theme (the calendar's is blue). It sits inline in the heading as
the version, so the heading reads "[7.41 ▾] Terrain Changes". */
/* Nudge the patch picker down 1px (the "Terrain Changes" label stays put). */
.tc-picker { transform: translateY(1px); position: relative; }
/* `transform` above turns .tc-picker into a stacking context that TRAPS the
menu's z-index:60 inside it — and since the change-list pane comes LATER in
the DOM than this heading, those rows painted OVER the (trapped) menu, making
the open dropdown look transparent. Lift the whole picker above the rows
while it's open so its menu paints on top. */
.tc-picker.is-open { z-index: 80; }
.tc-picker .cal-year-current {
background: linear-gradient(180deg, #3b2e1d 0%, #2a2014 100%);
border: 1px solid #e3c46a;
color: #f4e6bf;
/* Match the map toolbar's 28px control height so the heading row lines up
with the toolbar and the first change row meets the map's top edge. */
height: 28px;
padding-top: 0;
padding-bottom: 0;
}
.tc-picker .cal-year-caret { color: #e3c46a; }
.tc-picker .cal-year-current:hover { border-color: #f0d896; }
.tc-picker.is-open .cal-year-current,
.tc-picker .cal-year-current:focus-visible {
border-color: #f0d896;
box-shadow: inset 0 1px 0 rgba(190, 225, 240, 0.12),
0 0 0 3px rgba(227, 196, 106, 0.28);
}
.tc-picker .cal-year-menu {
background: #15110a;
border: 1px solid rgba(227, 196, 106, 0.4);
}
.tc-picker .cal-year-opt { color: #d8c79a; }
.tc-picker .cal-year-opt:hover { background: rgba(227, 196, 106, 0.14); color: #fff5dc; }
.tc-picker .cal-year-opt.is-selected {
background: rgba(227, 196, 106, 0.2);
box-shadow: inset 0 0 0 1px rgba(227, 196, 106, 0.45);
}
.terrain-map-pane[hidden],
.terrain-list-pane[hidden] { display: none; }
/* ---- "comparison not available yet" fallback (patch with changes but no map
pair): the latest map, blurred + dimmed, with a centred overlay. ---- */
.terrain-fallback {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border: 2px solid #e3c46a;
border-radius: 8px;
overflow: hidden;
background: #11140f;
box-shadow: inset 0 1px 0 rgba(190, 225, 240, 0.08),
0 6px 22px rgba(0, 0, 0, 0.5);
}
.tc-fallback-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: fill;
filter: blur(5px) grayscale(0.4) brightness(0.5);
transform: scale(1.06); /* hide the blur's soft edges */
}
.tc-fallback-veil {
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 45%,
rgba(17, 20, 15, 0.35), rgba(8, 8, 8, 0.78));
}
.tc-fallback-msg {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
text-align: center;
padding: 16px;
}
.tc-fallback-title {
font-family: 'Jersey 25', 'Jersey 10', sans-serif;
font-size: 26px;
letter-spacing: 0.5px;
color: #f4e6bf;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}
.tc-fallback-sub {
font-family: 'Jersey 25', 'Jersey 10', sans-serif;
font-size: 20px;
color: #e3c46a;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}
.tc-fallback-note {
margin-top: 8px;
font-size: 12px;
color: #b9c0c8;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
/* ---- magnifier lens (Loupe MODE) ---- */
/* Loupe is a mode toggled by the top-bar button (adds .loupe-on). Only then
does hovering show the pixel-loupe cursor + a gold magnifier circle that
follows the pointer over the MAP (not the handle / top-bar). Click pins it
(cursor back to normal); sweeping the handle then compares that spot old↔new
inside the circle, which also carries the toggled tree/camp markers (cloned
by scripts.js). */
.tc-stage { cursor: default; }
.terrain-compare.loupe-on .tc-stage {
cursor: url('icons/ui/gothic/icon_loupe.png') 11 11, zoom-in;
}
.terrain-compare.loupe-on .tc-stage.lens-pinned { cursor: default; }
.tc-lens {
position: absolute;
top: 0;
left: 0;
width: var(--lens, 184px);
height: var(--lens, 184px);
border-radius: 50%;
overflow: hidden;
border: 3px solid #e3c46a;
box-shadow:
0 0 0 2px rgba(8, 8, 8, 0.7),
0 6px 18px rgba(0, 0, 0, 0.6);
pointer-events: none; /* clicks pass through to the stage */
display: none;
will-change: transform;
z-index: 8;
}
.tc-lens.visible { display: block; }
.tc-stage.lens-pinned .tc-lens {
box-shadow:
0 0 0 2px rgba(8, 8, 8, 0.7),
0 8px 24px rgba(0, 0, 0, 0.72);
}
.tc-lens-img,
.tc-lens-markers {
position: absolute;
top: 0;
left: 0;
max-width: none; /* override the global img max-width */
user-select: none;
-webkit-user-drag: none;
will-change: transform;
}
.tc-lens-new { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.tc-lens-markers { pointer-events: none; overflow: visible; }
.tc-lens-rim {
position: absolute;
inset: 0;
border-radius: 50%;
pointer-events: none;
box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.55);
}
/* ---- What's New badge (index.html, anchored to BETA label) ---- */
.version-beta-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
/* Seen state = BETA stays at its default colour, no animation */
/* Unseen state = BETA pulses between its base colour and the sikle gold */
.version-beta-wrap:not(.wn-seen) .version-beta-text {
display: inline-block;
animation: whatsnew-breathe 2s ease-in-out infinite;
}
.version-beta-wrap { cursor: pointer; }
.version-beta-wrap .version.version-beta { cursor: pointer; }
@keyframes whatsnew-breathe {
0% { color: #c9d1d9; transform: scale(1); }
50% { color: #d6b764; transform: scale(1.12); }
100% { color: #c9d1d9; transform: scale(1); }
}
.whatsnew-popup {
position: fixed;
z-index: 200;
background: #0d1117;
border: 1px solid rgba(170, 220, 240, 0.35);
border-radius: 7px;
min-width: 240px;
max-width: 310px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.65);
display: none;
overflow: hidden;
}
.whatsnew-popup.wn-open { display: block; }
.whatsnew-popup-head {
padding: 8px 12px;
border-bottom: 1px solid rgba(139, 148, 158, 0.18);
font-family: 'Jersey 10', monospace;
font-size: 15px;
color: #e3c46a;
letter-spacing: 0.4px;
}
.whatsnew-list { padding: 5px 0; }
.whatsnew-row {
display: grid;
grid-template-columns: 44px 1fr auto;
align-items: center;
gap: 8px;
padding: 5px 12px;
font-size: 12px;
color: #c9d1d9;
text-decoration: none;
transition: background 0.12s;
}
a.whatsnew-row:hover {
background: rgba(139, 148, 158, 0.1);
color: #e6edf3;
}
.whatsnew-tag {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.3px;
text-transform: uppercase;
padding: 2px 5px;
border-radius: 2px;
text-align: center;
box-sizing: border-box;
}
.whatsnew-tag-page { background: rgba(88, 166, 255, 0.10); color: #79afd1; border: 1px solid rgba(88, 166, 255, 0.26); }
.whatsnew-tag-patch { background: rgba(227, 196, 106, 0.10); color: #b89d5a; border: 1px solid rgba(227, 196, 106, 0.26); }
.whatsnew-tag-hero { background: rgba(120, 215, 145, 0.10); color: #7aaa84; border: 1px solid rgba(120, 215, 145, 0.24); }
.whatsnew-date {
font-size: 10px;
color: #6b7280;
white-space: nowrap;
justify-self: end;
}
| |