/*
 * Hero loadout card — the in-game hero sheet.
 *
 * Drawn by template-parts/hero-loadout-card.php on a lineup page and in the armoury.
 * Lives in a file rather than inline because the armoury swaps the card in over AJAX,
 * where a re-injected <style> would arrive with every fetch.
 */
/* Adornment effects tooltip */
.inv-adorn-overlay:hover .inv-adorn-effects-tooltip { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }

/* Horse stats tooltip — reveal on hover of the badge or the whole portrait */
.inv-horse-stats-badge:hover .inv-horse-stats-tooltip,
.inv-horse-portrait:hover .inv-horse-stats-tooltip { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }

/* Gear slots */
.inv-gear-slot__icon.is-myth { border-color: rgba(239,68,68,0.45); box-shadow: 0 0 10px rgba(239,68,68,0.18) inset; }
.inv-gear-slot__icon { position: relative; }
/* Gear ascension — the builder's badge, same geometry and same fills. */
/* Sized to fit UNDER the 72px icon: four 11px stars with 2px gaps is 50px. At 18px the
   row was wider than the tile and pushed the four-across equipment layout into 2x2. */
.inv-lp-gstars { display: inline-flex; gap: 2px; align-items: center; margin-top: 2px; max-width: 72px; }
.inv-lp-gs { position: relative; width: 11px; height: 11px; display: inline-block; flex: 0 0 11px; }
.inv-lp-gpetal { position: absolute; left: 50%; top: 50%; width: 3.8px; height: 4.7px; margin: -4.7px 0 0 -1.9px; clip-path: polygon(50% 0, 78% 58%, 50% 100%, 22% 58%); background: #54617e; transform-origin: 50% 100%; z-index: 2; }
/* Same fill as the hero stars above, not the gear card's paler gold: on this page the
   two rows sit inches apart, so they have to be the same gold. No centre dot either —
   the hero flower hides it, and the gear card's glowing pip is what made these read as
   a different component. */
.inv-lp-gpetal.on { background: linear-gradient(160deg, #fde68a, #f59e0b 58%, #d97706); }
/* A mythical petal is red ON GOLD in the game — the gold star sits under the red one and
   shows at its edge. What looked like a white rim here was my gradient opening on #fecaca,
   which is nearly white. Saturated red now, with the gold rim drawn as two stacked
   drop-shadows: they follow the clip-path silhouette, which a border cannot. */
.inv-lp-gpetal.is-red.on { background: linear-gradient(160deg, #f87171, #dc2626 55%, #991b1b);
	filter: drop-shadow(0 0 0.7px #f0b429) drop-shadow(0 0 0.7px #e0a020); }
.inv-lp-gear-lv { font-size: 0.5rem; color: #cbd5e1; letter-spacing: 0.02em; line-height: 1; margin-top: 2px; }
.inv-lp-gear-lv b { color: #f59e0b; font-weight: 700; }
/* An awakened commander card. The art swap already carries most of the reading; this
   is the rim and the ember under it, kept restrained because three of these sit side
   by side and the page is not the hero page. The glow only lights at 100% — awakened
   art appears from 50%, but radiance is the finished state. */
.inv-cmd-awk.awakened { box-shadow: inset 0 0 0 1px rgba(245,158,11,0.32); }
.inv-cmd-awk.radiant { box-shadow: inset 0 0 0 1px rgba(245,158,11,0.55); }
/* The glints and the scanning shine used to be written out here, with their own
   keyframes, a second look-alike of the effect the builder and the hero page run. The
   page uses the one shared copy now (assets/css/awakened-radiant.css) — including the
   drifting smoke that was taken out on 2026-09-05, restored on request 2026-09-07 so
   every surface animates a fully awakened hero the same way.

   The anchor is BOTH the card and the picture box, so the picture half is an overlay
   (.inv-awk-fx.is-overlay, defined in the shared file) rather than a wrapper — nothing
   new enters the card's flex column, and no rule is needed here. */
/* Adornment disc. Below max it is the plain bronze ring; at 60 — the cap — it takes
   the loader's conic sweep, the same four stops in the same order, and the artwork
   insets so the ring reads as a frame around it rather than a border on it. */
.inv-lp-adorn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #7a5234; background: #2e1a10;
	box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 0 8px rgba(122,82,52,0.25); overflow: hidden; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer; }
.inv-lp-adorn:hover { transform: scale(1.18); box-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 0 18px rgba(122,82,52,0.5); }
.inv-lp-adorn.is-max { background: conic-gradient(from 210deg, #a98be6, #79d9ad, #7cb2e8, #a98be6);
	border-color: #e7d9ff; box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 0 12px rgba(169,139,230,0.45); }
.inv-lp-adorn.is-max img { width: 74%; height: 74%; border-radius: 50%; }
.inv-lp-adorn-lv { align-self: flex-end; font-family: 'Rajdhani', sans-serif; font-size: 0.58rem; font-weight: 700;
	line-height: 1; color: #1a1206; background: linear-gradient(180deg, #f0c060, #d4a034);
	border: 1px solid #7a5234; border-radius: 6px; padding: 3px 6px; white-space: nowrap; }
.inv-lp-adorn-lv.is-max { background: linear-gradient(180deg, #e7d9ff, #a98be6); border-color: #e7d9ff; color: #1a1030; }
/* Rarity tint, measured from the icon's own mythical red (hue 0). */
/* ── The mount trait chip ─────────────────────────────────────────────────────
   One renderer (invictus_trait_chip_html) and one look, wherever a trait is drawn: the
   game's chamfered plate, the artwork tinted by RANK — rank is rarity — and what the
   trait is worth at that rank beside it. The tint goes on the ARTWORK only; nothing
   rings the plate, because the game does not ring it either. */
.inv-trait-chip{display:inline-flex;align-items:center;gap:3px;text-decoration:none}
.inv-trait-chip:hover{text-decoration:none}
.inv-trait-chip__ico{display:inline-flex;width:20px;height:20px;flex:0 0 20px;background:#0b1120;
	clip-path:polygon(28% 0,72% 0,100% 28%,100% 72%,72% 100%,28% 100%,0 72%,0 28%)}
.inv-trait-chip__ico img{width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.inv-trait-chip__val{font-style:normal;font-family:Rajdhani,sans-serif;font-weight:700;
	font-size:.58rem;line-height:1;color:#4ade80;font-variant-numeric:tabular-nums}
.inv-trait-chip[data-trait-tier=mythical] img{filter:none}
.inv-trait-chip[data-trait-tier=legendary] img{filter:hue-rotate(38deg) saturate(1.15)}
.inv-trait-chip[data-trait-tier=epic] img{filter:hue-rotate(271deg) saturate(1.15)}
.inv-trait-chip[data-trait-tier=rare] img{filter:hue-rotate(217deg) saturate(1.15)}
.inv-trait-chip[data-trait-tier=uncommon] img{filter:hue-rotate(142deg) saturate(1.15)}
.inv-trait-chip[data-trait-tier=common] img{filter:grayscale(1) brightness(1.15)}

.inv-lp-trait[data-trait-tier=mythical] img { filter: none; }
.inv-lp-trait[data-trait-tier=legendary] img { filter: hue-rotate(38deg) saturate(1.15); }
.inv-lp-trait[data-trait-tier=epic] img { filter: hue-rotate(271deg) saturate(1.15); }
.inv-lp-trait[data-trait-tier=rare] img { filter: hue-rotate(217deg) saturate(1.15); }
.inv-lp-trait[data-trait-tier=uncommon] img { filter: hue-rotate(142deg) saturate(1.15); }
.inv-lp-trait[data-trait-tier=common] img { filter: grayscale(1) brightness(1.15); }
.inv-lp-flowers { display: flex; gap: 3px; align-items: center; }
.inv-lp-flower { position: relative; width: 24px; height: 24px; flex: 0 0 24px; }
/* Same shape and fan as the builder's petal, halved: a 72-degree fan is what makes it
   read as a flower rather than a crown. */
.inv-lp-petal { position: absolute; left: 50%; top: 50%; width: 7px; height: 9.3px; margin: -9.3px 0 0 -3.5px; clip-path: polygon(50% 0, 78% 58%, 50% 100%, 22% 58%); background: #222b3b; transform-origin: 50% 100%; z-index: 2; }
.inv-lp-petal.on { background: linear-gradient(160deg, #fde68a, #f59e0b 58%, #d97706); z-index: 3; }
.inv-gear-slot { position: relative; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.inv-gear-slot__icon { width: 72px; height: 72px; border-radius: 10px; background: #111827; border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; color: #4b5563; transition: border-color 0.2s, color 0.2s; overflow: hidden; }
.inv-gear-slot__label { font-size: 0.5rem; color: #4b5563; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; font-weight: 600; }
.inv-gear-slot__count { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%; font-size: 0.55rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; border: 1.5px solid #4e3c1e; background: #111827; color: #f59e0b; }
.inv-gear-slot:hover .inv-gear-slot__icon { border-color: rgba(217,119,6,0.4); color: #d97706; }

/* Gear gems tooltip */
/* Width-capped and wrapping.
   This was `white-space: nowrap` with no max-width, absolutely positioned and centred
   on a 66px tile. Rows like "Damage taken reduction from unit types countering you"
   made it several hundred pixels wide, and an absolutely positioned box still extends
   the document's scrollable area — which is why the page could be pinched out to
   reveal empty space on the right even though it looked correct on load. */
.inv-gear-gems-tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 8px; background: rgba(13,20,36,0.95); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 10px; opacity: 0; visibility: hidden; transition: opacity 0.15s; pointer-events: none; z-index: 9999; white-space: normal; width: max-content; max-width: min(300px, 76vw); }
/* Hiding this on touch was the wrong fix: it removed the overflow but also removed the
   panel, and a gear tile is exactly what a player wants to tap. The width cap above is
   what actually stops the overflow; the panel stays and opens on tap instead. */
.inv-gear-slot.inv-tip-open .inv-gear-gems-tooltip { opacity: 1; visibility: visible; pointer-events: auto; }
.inv-gear-slot:first-child .inv-gear-gems-tooltip { left: 0; transform: none; }
.inv-gear-slot:last-child .inv-gear-gems-tooltip { left: auto; right: 0; transform: none; }
.inv-gear-slot:hover .inv-gear-gems-tooltip { opacity: 1; visibility: visible; pointer-events: auto; }
.inv-gear-gems-tooltip__title { font-size: 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #6b7494; margin: 0 0 8px; text-align: center; }
.inv-gear-gems-tooltip__list { display: flex; gap: 6px; justify-content: center; }
.inv-gear-gems-tooltip__gem { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.inv-gear-gems-tooltip__gem-icon { width: 36px; height: 36px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); transition: border-color 0.15s; }
.inv-gear-gems-tooltip__gem:hover .inv-gear-gems-tooltip__gem-icon { border-color: #f59e0b; }
.inv-gear-gems-tooltip__gem-name { font-size: 0.4rem; color: #6b7494; text-align: center; line-height: 1.2; max-width: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-gear-gems-tooltip__gem:hover .inv-gear-gems-tooltip__gem-name { color: #fff; }

/* Ring swap button */
.inv-ring-swap-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, border-color 0.2s; flex-shrink: 0; }
.inv-ring-swap-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(217,119,6,0.4); }
.inv-ring-swap-btn:hover svg { stroke: #d97706; }

/* Equipment panel: single framed row — 2 gears · ring (bigger, center) · 2 gears */
/* Commander (lead) badge — top-right of the CMD 1 hero card, mirrors the game. */
.inv-cmd-badge { position: absolute; top: -1px; right: 18px; width: 53px; height: auto; z-index: 4; filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.55)); pointer-events: none; }

/* Lift the whole card above its neighbours while a tooltip is showing so the
   tooltip is never painted behind the next card (the hovered skill's transform
   otherwise makes a low stacking context). */
.inv-cmd-card { position: relative; }
.inv-cmd-card:hover,
.inv-cmd-card:focus-within,
.inv-cmd-card:has(.inv-tip-open) { z-index: 40; }
/* A tooltip opens over the gear tiles above it, and those tiles put their gem pips
   at z-index 6 and their level and stars at 3 — in the CARD's stacking context,
   because a gear slot is positioned but never gets a z-index of its own. The tip's
   own 9999 cannot beat them from inside an ancestor that sits lower, so the element
   the tip belongs to is lifted while it is open: one context, above the tiles,
   carrying the tip with it. */
.inv-ring-slide.inv-tip-open,
.inv-ls-skill.inv-tip-open,
.inv-gear-slot.inv-tip-open,
.inv-equip-ring:has(.inv-tip-open),
.inv-equip-ring__stack:has(.inv-tip-open) { position: relative; z-index: 120; }
/* And from the other side, so it holds whatever ancestor the tip is sitting in:
   while a tooltip is open anywhere on this card, the tiles' own decorations stop
   competing. They are descendants of the tile, so they still paint over its art. */
.inv-cmd-card:has(.inv-tip-open) .inv-gear-tile__gems,
.inv-cmd-card:has(.inv-tip-open) .inv-gear-tile__lv,
.inv-cmd-card:has(.inv-tip-open) .inv-gear-tile .inv-lp-gstars { z-index: 0; }

/* Four pieces two-by-two with the ring underneath, the way the game lays them out. The
   ring sits between slots 2 and 3 in the markup, so `order` moves it rather than the
   block itself — the ring is seventy lines of tooltip and level resolution. */
.inv-equip-panel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; justify-items: center; align-items: start; max-width: 100%; overflow: visible; }
/* Three cards abreast leave each pair little room, so on a phone the gutters give way
   before the tiles do — the pair stays inside its card with a visible break between
   one hero's gear and the next. */
@media (max-width: 768px) { .inv-equip-panel { gap: 5px; } }
.inv-equip-panel .inv-gear-slot { margin-top: 0; }
.inv-equip-panel .inv-equip-ring { order: 5; grid-column: 1 / -1; }
.inv-equip-head { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #64748b; margin: 0 0 8px; }
/* Sits with the ring, not with the gear it is written after. */
.inv-equip-head--ring { order: 4; grid-column: 1 / -1; justify-self: start; margin: 10px 0 0; }
.inv-equip-panel .inv-gear-slot__icon { width: 58px; height: 58px; border-radius: 8px; background: transparent; border: 0; }
/* Rarity reads from the tile, before any number does: red for mythical, gold for
   legendary — the same two states the gear card toggles between. */
.inv-equip-panel .inv-gear-slot { position: relative; }
/* The tile: a soft top-lit gradient in the rarity's colour, the level over the art, and
   the stars on a dimmed strip along the bottom — the game's own arrangement. */
/* Fluid with a 66px ceiling, NOT a fixed 66px. A grid item defaults to min-width:auto,
   so a fixed-width tile refuses to shrink: on a narrow phone the two columns could not
   fit inside the card, the grid overflowed it, and the tiles ran into each other. The
   cap keeps the desktop size identical. */
.inv-equip-panel .inv-gear-slot { min-width: 0; width: 100%; }
.inv-gear-tile { position: relative; width: 100%; max-width: 66px; border-radius: 0; overflow: hidden; border: 1px solid transparent; }
.inv-gear-slot.is-leg .inv-gear-tile { background: linear-gradient(180deg, #f0b752 0%, #b9822c 55%, #7d5417 100%); border-color: rgba(245,215,140,0.55); }
/* Brick, not fire-engine red — the game's mythical plate is a muted terracotta, and a
   saturated red made the artwork on it hard to read. */
/* Rust, not pink: the reference plate is a burnt orange-brown that lifts in the middle
   and settles darker at both ends, which is what makes the artwork sit ON it rather than
   float above a flat red. */
.inv-gear-slot.is-myth .inv-gear-tile { background: linear-gradient(180deg, #a04e30 0%, #bd6d47 46%, #8d4227 100%); border-color: rgba(232,178,148,0.42); }
.inv-equip-panel .inv-gear-slot__icon { width: 100%; height: 60px; border-radius: 0; padding: 3px 3px 0; }
/* Gem pips. At 9px with `cover` they were a muddy dot each — present in the markup and
   invisible on the tile. Bigger, contained rather than cropped, and on a dark plate with
   a light edge so each one reads as a gem at a glance, like the game's. */
/* The hover panel: what this piece and its gems actually give. Rows are label-left /
   value-right so the numbers line up down the column, as the game's own panel does. */
.inv-gear-gems-tooltip { white-space: normal !important; min-width: 250px; max-width: 300px; }
.inv-gt-head { font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #f0c674; margin: 6px 0 3px; }
.inv-gt-head--gem { color: #7dd3fc; margin-top: 9px; }
.inv-gt-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 3px 0; border-top: 1px solid rgba(255,255,255,0.05); }
.inv-gt-name { display: flex; align-items: center; gap: 5px; font-size: 0.66rem; color: #c8cce8; line-height: 1.25; min-width: 0; }
.inv-gt-val { font-size: 0.68rem; font-weight: 700; color: #fff; white-space: nowrap; }
/* The row marker is the same petal star as the tile — it names WHICH ascension star
   granted the line, so it must fill partially exactly as that star does. */
.inv-gt-name .inv-lp-gs { flex: 0 0 auto; margin-right: 1px; }
.inv-gt-gem { position: relative; width: 18px; height: 18px; flex: 0 0 18px; }
/* Header: label and level on the left, the piece's ascension on the right, as the game
   puts them. Unlit stars stay dim rather than vanishing, so the row always reads 4. */
.inv-gear-gems-tooltip__title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.inv-gt-hstars { display: inline-flex; gap: 3px; align-items: center; }
/* A line the game grants but this model does not simulate — dimmed and flagged rather
   than dropped, so the panel matches the player's own game and still tells the truth
   about what the numbers here are based on. */
.inv-gt-row.is-unsim .inv-gt-name, .inv-gt-row.is-unsim .inv-gt-val { opacity: 0.55; }
.inv-gt-unsim { font-style: normal; margin-left: 4px; font-size: 0.6rem; color: #f59e0b; }
.inv-gear-tile__gems { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; z-index: 6; }
/* No box: the game shows the gems themselves along the top, not framed chips — the
   border and plate I gave them read as a second row of tiles on top of the tile. */
.inv-gear-tile__gem { position: relative; width: 12px; height: 12px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7)); }
/* The gem's mythical tier, as the game marks it — a roman numeral on the stone. */
/* Centred along the stone's foot, as the game engraves it. Struck rather than printed:
   a serif face, a cream-to-gold gradient down the letterform, a dark edge around it and
   a shadow under it — which is what reads as embossed metal at this size.

   The gradient goes on via background-clip, and the plain cream fill is set FIRST so a
   browser without it shows a legible numeral instead of a transparent one. */
.inv-gear-tile__gem-t { position: absolute; left: 0; right: 0; bottom: -4px; text-align: center;
	font-family: Georgia, 'Times New Roman', serif; font-style: normal; font-size: 8px;
	font-weight: 700; line-height: 1; letter-spacing: 0.01em;
	color: #fff4dc; text-shadow: 0 0 2px #2b1608, 0 1px 2px #000, 0 0 4px rgba(0,0,0,0.85); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
	.inv-gear-tile__gem-t {
		background: linear-gradient(180deg, #fffdf6 0%, #f6e6c6 42%, #cfa972 100%);
		-webkit-background-clip: text; background-clip: text; color: transparent;
		-webkit-text-stroke: 0.4px rgba(58,28,12,0.95);
		text-shadow: none;
		filter: drop-shadow(0 1px 1px rgba(0,0,0,0.95)) drop-shadow(0 0 2px rgba(0,0,0,0.7));
	}
}
.inv-gt-tier { font-style: normal; font-size: 0.55rem; font-weight: 700; color: #ffe9b0; opacity: 0.85; }
.inv-gear-tile__gem img { object-fit: contain !important; }
.inv-gear-tile__gem.is-empty { opacity: 0.35; }
.inv-gear-tile__lv { position: absolute; left: 4px; bottom: 15px; z-index: 3; font-size: 0.58rem; font-weight: 700; color: #fff; line-height: 1; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.inv-gear-tile__lv b { color: #fff; font-weight: 700; }
/* The strip is what separates the stars from the artwork without a hard border. */
.inv-gear-tile .inv-lp-gstars { position: relative; z-index: 3; display: flex; justify-content: center; gap: 1px; width: 100%; margin: 0; padding: 2px 0 2px; background: rgba(0,0,0,0.32); }
.inv-equip-ring { flex: 0 0 auto; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.inv-equip-ring__stack { position: relative; }
/* Ring level badge — same look as the skill Lv badge (.inv-ls-skill-lv). */
/* Three layers, bottom to top: the empty slot frame, the quality disc, the ring. Both
   plates are the same 484x480 canvas and get the same inset, so they register exactly
   and the ring lands in the middle of both.

   The inset is what makes the ring SIT IN the disc rather than spill over it: the art is
   60px, the plates -19px on every side, so they are roughly 98px and the ring fills about
   two thirds of them — the proportion the game uses. At -9px the disc was smaller than
   the ring it was supposed to be backing. */
.inv-ring-art::before,
.inv-ring-art::after { content: ""; position: absolute; inset: -19px;
	background-size: contain; background-position: center; background-repeat: no-repeat;
	pointer-events: none; }
.inv-ring-art::before { z-index: 0; background-image: var(--inv-ring-slot, none); }
.inv-ring-art::after  { z-index: 1; background-image: var(--inv-ring-bg, none); }
/* The plates hang 19px past the 60px art on every side, so the block needs that much
   room or they get sliced top and bottom — and the level has to clear the bottom of the
   plate rather than sit on it, which is what made it unreadable against the gold. */
.inv-equip-panel .inv-equip-ring { padding: 22px 0 4px; }
.inv-ring-lv { display: block; margin-top: 23px; text-align: center; font-family: 'Rajdhani', sans-serif; font-size: 0.8rem; font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.9); }
.inv-equip-ring__lv { position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); z-index: 4; font-family: 'Rajdhani', sans-serif; font-size: 0.6rem; font-weight: 700; line-height: 1; color: #f5e6c0; background: rgba(13,20,36,0.92); border: 1px solid rgba(201,168,76,0.55); border-radius: 6px; padding: 1px 5px; white-space: nowrap; }
.inv-ring-swap-btn--overlay { position: absolute; top: -8px; left: -8px; width: 26px; height: 26px; z-index: 6; }

/* Rich hover tooltip — sim-matching skill / ring breakdown */
.inv-ls-skill.inv-has-tip { position: relative; }
.inv-tip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(4px); margin-bottom: 10px; width: 280px; max-width: 78vw; background: rgba(10,15,28,0.98); border: 1px solid rgba(217,119,6,0.35); border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.55); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 9999; text-align: left; white-space: normal; }
.inv-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: rgba(10,15,28,0.98); }
.inv-ls-skill.inv-has-tip:hover .inv-tip,
.inv-ring-slide:hover .inv-tip,
.inv-ls-skill.inv-tip-open .inv-tip,
.inv-ring-slide.inv-tip-open .inv-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.inv-tip__title { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #f59e0b; margin: 0 0 8px; line-height: 1.25; }
.inv-tip__body { font-size: 0.8rem; }
/* Ring tooltip anchors to the ring thumbnail and floats above it. */
.inv-ring-slide { position: relative; }
.inv-tip--ring { width: 340px; max-width: 88vw; }

/* Horse + Talent side-by-side (game "at + YETENEKLER" layout) */
.inv-horse-talent-row { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; margin-top: 4px; }
.inv-horse-col { flex: 1 1 100%; width: 100%; max-width: 100%; order: 1; }
.inv-talent-col { flex: 1 1 220px; min-width: 200px; display: flex; flex-direction: column; order: 2; }
.inv-talent-col .inv-lineup-cmd-talent-btn { width: 100%; height: 100%; }

@keyframes inv-skill-icon-glow {
	0%, 100% { box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 0 8px rgba(122,82,52,0.2); }
	50% { box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 0 16px rgba(122,82,52,0.5); }
}

/* ── Skills row (Commander | Signature · 1st · 2nd) — in-game style ─────────── */
/* Two-by-two when the card is narrow, four across when it is wide — never the 3+1 a
   wrapping flex row produced, which split the commander/signature pair across two lines.
   In two columns the pairing falls out of the DOM order for free: commander + signature
   on the first row, the two customizable skills on the second.

   Keyed to the CARD's width with a container query, not the viewport: the cards sit
   three-up beside a sidebar that comes and goes, so the viewport says little about how
   much room a card actually has. Four slots measure 4x58 + gaps, hence 270px. */
.inv-ls-skill-wrap { container-type: inline-size; }
.inv-ls-skill-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 8px; align-items: start; justify-items: center; }
@container (min-width: 270px) {
	.inv-ls-skill-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* The divider belongs to the flex row it was drawn for; in a grid it would eat a cell. */
.inv-ls-skill-sep { display: none; }
.inv-ls-skill { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 58px; text-decoration: none; }
.inv-ls-skill--link { transition: transform 0.15s ease; }
.inv-ls-skill--link:hover { transform: translateY(-2px); }
.inv-ls-skill-frame { position: relative; width: 56px; height: 56px; }
.inv-ls-skill-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; object-fit: cover; z-index: 1; }
.inv-ls-skill-frameimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; pointer-events: none; }
.inv-ls-skill-lv { position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); z-index: 3; font-family: 'Rajdhani', sans-serif; font-size: 0.6rem; font-weight: 700; line-height: 1; color: #f5e6c0; background: rgba(13,20,36,0.92); border: 1px solid rgba(201,168,76,0.55); border-radius: 6px; padding: 1px 5px; white-space: nowrap; }
.inv-ls-skill--link:hover .inv-ls-skill-lv { border-color: var(--tier-color); }
.inv-ls-skill-role { font-size: 0.5rem; color: #6b7494; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-top: 2px; text-align: center; }
.inv-ls-skill-stars { display: flex; gap: 1px; margin-top: 2px; }
.inv-ls-star { font-size: 0.5rem; line-height: 1; color: #374151; }
.inv-ls-star.is-on { color: #ef4444; }
.inv-ls-skill-sep { align-self: stretch; width: 1px; margin: 2px 3px 0; background: rgba(255,255,255,0.12); }

/* Hero level — sits with the star flower the way the game pairs them on the portrait. */
.inv-lp-level { font-family: Rajdhani, sans-serif; font-weight: 700; font-size: 0.95rem; color: #fbbf24; letter-spacing: 0.02em; line-height: 1; font-variant-numeric: tabular-nums; }

/* A gem pip carries its rarity the way a trait chip carries its rank: one palette,
   a hue rotation on the image alone. Composite pips are left alone — their art
   already ships one painted plate per rarity. */
.inv-gear-tile__gem[data-rarity=mythical] img{filter:none}
.inv-gear-tile__gem[data-rarity=legendary] img{filter:hue-rotate(38deg) saturate(1.15)}
.inv-gear-tile__gem[data-rarity=epic] img{filter:hue-rotate(271deg) saturate(1.15)}
.inv-gear-tile__gem[data-rarity=rare] img{filter:hue-rotate(217deg) saturate(1.15)}
.inv-gear-tile__gem[data-rarity=uncommon] img{filter:hue-rotate(142deg) saturate(1.15)}
.inv-gear-tile__gem[data-rarity=common] img{filter:grayscale(1) brightness(1.15)}