#simMain { display: grid; grid-template-columns: 260px 60px 1fr 60px 260px; gap: 8px; padding: 10px; align-items: flex-start; }
.attach-col { display: flex; flex-direction: column; gap: 4px; padding: 4px; background: linear-gradient(#2a2410, #1a1608); border: 2px solid #a8860b; border-radius: 6px; position: sticky; top: 210px; box-shadow: 0 0 8px #a8860b40, inset 0 0 0 1px #000; }
.attach-col .att-label { font-size: 9px; color: #ffd66b; text-align: center; letter-spacing: 1px; padding: 2px 0; border-bottom: 1px solid #5a4a0f; }
.attach-col .att-slot { width: 48px; height: 48px; background: #0c0c0c; border: 1px solid #5a4a0f; border-radius: 4px; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; }
.attach-col .att-slot.filled { border-color: #d1a526; background: #1a1406; }
.attach-col .att-slot.drop { border-color: #ffd66b; background: #3a2a10; }
.attach-col .att-slot img { width: 42px; height: 42px; image-rendering: pixelated; }
.attach-col .att-slot .att-rm { position: absolute; top: -4px; right: -4px; background: #c74040; color: #fff; width: 14px; height: 14px; border-radius: 50%; font-size: 10px; line-height: 12px; text-align: center; cursor: pointer; display: none; }
.attach-col .att-slot.filled:hover .att-rm { display: block; }
.attach-col .att-slot .att-type { position: absolute; bottom: 1px; left: 2px; font-size: 8px; color: #d1a526; font-weight: 700; letter-spacing: 0.5px; pointer-events: none; }
.attach-col .att-slot.filled .att-type { color: #000; text-shadow: 0 0 2px #ffd66b; }
.attach-col .att-divider { height: 1px; background: #5a4a0f; margin: 2px 0; }
.att-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 8px; max-height: 400px; overflow-y: auto; }
.att-opt { background: #1a1a1a; border: 1px solid #333; border-radius: 4px; padding: 5px; cursor: pointer; transition: border-color .1s; display: flex; flex-direction: column; gap: 4px; }
.att-opt:hover { border-color: #d1a526; background: #2a1f08; }
.att-opt img { width: 28px; height: 28px; image-rendering: pixelated; align-self: center; }
.att-opt-n { font-size: 11px; font-weight: 700; color: #ddd; }
.att-opt-d { font-size: 10px; color: #999; line-height: 1.3; }
.side { background: linear-gradient(#222, #1c1c1c); border: 2px solid #3a3a3a; border-radius: 6px; padding: 8px; position: sticky; top: 210px; box-shadow: inset 0 0 0 1px #111; }
.side h2 { margin: 0 0 8px; font-size: 16px; display: flex; align-items: center; justify-content: space-between; letter-spacing: 1px; }
.side.active { border-color: #d1a526; box-shadow: 0 0 0 2px #d1a52640, inset 0 0 0 1px #111; }
.setactive { background: #333; color: #bbb; border: 1px solid #555; padding: 3px 10px; border-radius: 3px; font-size: 11px; cursor: pointer; }
.side.active .setactive { background: #a8860b; color: #fff; border-color: #ffd66b; }

.totals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 12px; }
.totals .stat-box { background: #0c0c0c; border: 2px solid #2a2a2a; padding: 6px 8px; border-radius: 4px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.totals .stat-box img { width: 26px; height: 26px; image-rendering: pixelated; }
.totals .stat-box .v { font-size: 22px; font-weight: 800; }
.totals .stat-hp  { border-color: #3a6a2a; } .totals .stat-hp  .v { color: #9eff6b; }
.totals .stat-arm { border-color: #2a4a7a; } .totals .stat-arm .v { color: #9bc8ff; }
.totals .stat-atk { border-color: #6a2a2a; } .totals .stat-atk .v { color: #ff9b9b; }
.totals .stat-spd { border-color: #6a5a2a; } .totals .stat-spd .v { color: #ffd66b; }
.bs-block { background: #0c0c0c; border: 1px dashed #4a4a2a; border-radius: 4px; padding: 6px 8px; margin-top: 2px; }
#snapshotsPanel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 10px 10px; }
#snapshotsPanel .snap-side { display: flex; flex-direction: column; gap: 6px; }
#snapshotsPanel .snap-side:empty { display: none; }
#snapshotsPanel .snap-side-title { color: #888; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 2px 0; border-bottom: 1px solid #333; margin-bottom: 2px; }
#snapshotsPanel .snap-side-title.hero { color: #9eff6b; border-color: #3a6a2a; }
#snapshotsPanel .snap-side-title.opp  { color: #ff9b9b; border-color: #6a2a2a; }
/* Bundle indicator: small colored letter at the bottom-left of each item
   card / slot. Letter = world (F=forest, S=swamp, C=cauldron, A=all),
   tile background = bundle_color (RED/BLUE/YELLOW). 12x12px tile keeps
   the existing layout intact. */
.bundle-badge {
  position: absolute; bottom: 1px; left: 1px;
  width: 12px; height: 12px;
  font-size: 9px; font-weight: 700; line-height: 12px;
  text-align: center; color: #fff;
  background: #444; border-radius: 2px;
  pointer-events: none; user-select: none; z-index: 3;
}
.bundle-badge.bc-RED    { background: #c74040; }
.bundle-badge.bc-BLUE   { background: #4070c7; }
.bundle-badge.bc-YELLOW { background: #c7a040; color: #1a1a1a; }
.bundle-badge.bw-CAULDRON { background: #8a5ac0; }
.bundle-badge.bw-ALL      { background: #80c040; color: #1a1a1a; }
/* Cauldron recipe ingredient icons - up to 2 sprites in bottom-right corner. */
.recipe-icons {
  position: absolute; bottom: 1px; right: 1px;
  display: flex; gap: 1px;
  pointer-events: none; z-index: 3;
}
.recipe-icons img {
  width: 14px; height: 14px;
  image-rendering: pixelated;
  background: rgba(0,0,0,0.55);
  border-radius: 2px;
  padding: 1px;
}
.pool-card .recipe-icons img { width: 16px; height: 16px; }
.bs-block .bs-title { color: #d8c040; font-size: 10px; letter-spacing: 1px; margin-bottom: 4px; }
.bs-block .bs-stats { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: #ddd; }
.bs-block .bs-stat b { color: #fff; font-weight: 700; }
.bs-block .bs-stat[data-bd] { cursor: help; padding: 0 3px; border-radius: 2px; }
.bs-block .bs-stat[data-bd]:hover { background: #1f1f0a; outline: 1px dashed #6a6a3a; }
.bs-block .bs-strikes { color: #ffd66b; }
.ttbd { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; font-size: 11px; }
.ttbd-row { display: flex; justify-content: space-between; gap: 12px; padding: 1px 4px; }
.ttbd-row .ttbd-src { color: #c0c0a0; }
.ttbd-row .ttbd-val { color: #fff; font-weight: 600; min-width: 38px; text-align: right; }
.ttbd-row.ttbd-sum { border-top: 1px solid #555; padding-top: 3px; margin-top: 2px; color: #d8c040; }
.ttbd-row.ttbd-sum .ttbd-src, .ttbd-row.ttbd-sum .ttbd-val { color: #d8c040; }
.ttbd-row.ttbd-trig { background: #1a2a1a; color: #b8ffa0; border-radius: 2px; }
.ttbd-row.ttbd-trig .ttbd-src, .ttbd-row.ttbd-trig .ttbd-val { color: #b8ffa0; }
.ttbd-row.ttbd-mult { background: #1a1a3a; color: #aabfff; border-radius: 2px; }
.ttbd-row.ttbd-mult .ttbd-src, .ttbd-row.ttbd-mult .ttbd-val { color: #aabfff; }
.ttbd-row.ttbd-empty { color: #888; font-style: italic; }
.ttbd-final { margin-top: 5px; padding-top: 4px; border-top: 1px solid #555; color: #fff; font-size: 12px; }
.ttbd-final b { color: #ffd66b; }
.bs-block .bs-statuses { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; font-size: 11px; }
.bs-block .bs-status { background: #1a1a1a; border: 1px solid #333; padding: 1px 6px; border-radius: 3px; }
.bs-block .bs-status.bs-thorns { color: #b8ffa0; border-color: #5a8a2a; }
.bs-block .bs-status.bs-acid { color: #b8ffa0; border-color: #5a8a2a; }
.bs-block .bs-status.bs-poison { color: #d9a6ff; border-color: #7a4ab0; }
.bs-block .bs-status.bs-riptide { color: #9bc8ff; border-color: #4a7aa0; }
.bs-block .bs-status.bs-regeneration { color: #9eff6b; border-color: #4a8a2a; }
.bs-block .bs-status.bs-freeze { color: #aadfff; border-color: #4a8ab0; }
.bs-block .bs-status.bs-stun { color: #ffd66b; border-color: #a88a1a; }
.bs-block .bs-status.bs-purity { color: #ffffcc; border-color: #8a8a4a; }
.bs-block .bs-status.bs-fear { color: #ff9b9b; border-color: #8a3a3a; }
.active-sets { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.active-sets .set-header { color: #ff9966; font-size: 10px; letter-spacing: 1px; font-weight: 700; padding: 2px 4px; }
.active-set { background: #2a1f0a; border: 1px solid #ff9966; border-radius: 4px; padding: 4px 6px; font-size: 11px; color: #ffcc99; line-height: 1.3; display: flex; align-items: center; gap: 6px; cursor: help; }
.active-set:hover { background: #3a2a10; }
.active-set b { color: #ff9966; }
.active-set .set-icon { width: 22px; height: 22px; image-rendering: pixelated; flex-shrink: 0; }
.active-set .set-name { flex-shrink: 0; }
.active-set .set-desc { color: #bfa68a; font-size: 10px; }

.slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
/* Compact slots - icon only, no name/desc inside. Tooltip on click/hover. */
.slot { background: #0a0a0a; border: 2px solid #2a2a2a; border-radius: 5px; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; position: relative; cursor: pointer; transition: border-color 0.1s; }
.slot.filled { background: linear-gradient(#181818, #0e0e0e); border-color: #4a4a4a; cursor: grab; }
.slot.filled:hover { border-color: #888; }
.slot.weapon { border-color: #c19a2a; box-shadow: inset 0 0 8px #c19a2a30; }
.slot.drop { border-color: #6af; background: #1a2234; }
.slot img { width: 48px; height: 48px; image-rendering: pixelated; pointer-events: none; }
/* Hide name + stats inside slot - shown on hover/click in tooltip */
.slot .si { display: none; }
.slot .rm { position: absolute; top: 1px; right: 3px; color: #f88; cursor: pointer; font-weight: bold; display: none; padding: 0 4px; }
.slot.filled:hover .rm { display: block; }
.slot .n-idx { position: absolute; bottom: 1px; right: 4px; color: #555; font-size: 9px; pointer-events: none; }
.slot .pl { color: #666; font-size: 11px; padding-left: 8px; pointer-events: none; }
.slot .tier-tag { position: absolute; top: 2px; left: 4px; font-size: 11px; font-weight: 800; width: 18px; height: 18px; border-radius: 3px; display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; background: #2a2a2a; color: #aaa; border: 1px solid #444; }
.slot .tier-tag:hover { background: #444; color: #fff; }
.slot .tier-tag[data-tier="G"] { background: #5a4a0f; color: #ffd84a; border-color: #d1a526; }
.slot .tier-tag[data-tier="D"] { background: #1a4a4a; color: #9bf6ff; border-color: #4ad6e0; }
.slot.tier-G { box-shadow: inset 0 0 10px #d1a52640; }
.slot.tier-D { box-shadow: inset 0 0 12px #4ad6e060; border-color: #4ad6e0; }

.center { min-width: 0; }
.pool-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 2px 8px; font-size: 12px; color: #ccc; }
/* Pool: icon-only compact grid. Tooltip on hover reveals name/desc/stats. */
#pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 3px; }
.pool-card { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 4px; padding: 2px; cursor: grab; text-align: center; position: relative; }
.pool-card:hover { background: #2a2a2a; border-color: #888; }
.pool-card img { width: 100%; height: 44px; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
/* Hide pool card name/subtitle - use tooltip on hover instead */
.pool-card .n, .pool-card .s { display: none; }
/* Section header inside the pool grid spans the full row so groupings (rarity,
   tag, weapons-vs-others) read as visual breaks rather than alphabet noise. */
.pool-section { grid-column: 1 / -1; padding: 6px 2px 2px; margin-top: 4px; font-size: 11px; letter-spacing: 1px; color: #d8c040; border-bottom: 1px solid #3a3a3a; }
.pool-sort-row { grid-column: 1 / -1; display: flex; gap: 4px; align-items: center; padding: 0 2px 4px; font-size: 11px; color: #888; }
.pool-sort-row .pool-sort-lbl { margin-right: 2px; }
.pool-sort-btn { background: #1a1a1a; border: 1px solid #333; color: #aaa; padding: 2px 8px; font-size: 11px; border-radius: 3px; cursor: pointer; font-family: inherit; }
.pool-sort-btn:hover { background: #2a2a2a; color: #ddd; }
.pool-sort-btn.on { background: #1a3a4a; border-color: #4a8ab0; color: #cfe6ff; }
.pool-card .card-uniq { display: inline-block; position: absolute; top: 1px; right: 1px; background: #5a3a1a; color: #ffd66b; font-size: 9px; padding: 0 3px; border-radius: 2px; line-height: 1.2; }

.bundle-picker { display: flex; gap: 4px; flex-wrap: wrap; }
.bundle-picker .bbtn { position: relative; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 4px 10px 4px 18px; border-radius: 4px; cursor: pointer; border: 1px solid #333; user-select: none; background: #151515; color: #555; font-family: inherit; filter: grayscale(1); text-decoration: line-through; }
.bundle-picker .bbtn:hover { color: #888; }
.bundle-picker .bbtn.on { color: #bbb; filter: none; text-decoration: none; }
/* small color square = bundle color (red/blue/yellow); border = world (woodland green / swampland teal) */
.bundle-picker .bbtn::before { content: ''; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 2px; }
.bundle-picker .bbtn.WOODLAND_RED::before    { background: #c74040; }
.bundle-picker .bbtn.WOODLAND_BLUE::before   { background: #4a8acc; }
.bundle-picker .bbtn.WOODLAND_YELLOW::before { background: #d8c040; }
.bundle-picker .bbtn.SWAMPLAND_RED::before    { background: #c74040; }
.bundle-picker .bbtn.SWAMPLAND_BLUE::before   { background: #4a8acc; }
.bundle-picker .bbtn.SWAMPLAND_YELLOW::before { background: #d8c040; }
/* world: forest = green tinted bg, swamp = teal tinted bg */
.bundle-picker .bbtn.w { border-color: #6a8a2a; background: #1a2a10; color: #c0e090; }
.bundle-picker .bbtn.w.on { background: #2a4a1a; border-color: #9bd060; color: #d0f0a0; box-shadow: 0 0 4px #6a8a2a80; }
.bundle-picker .bbtn.s { border-color: #4a6a8a; background: #102030; color: #a0c0e0; }
.bundle-picker .bbtn.s.on { background: #1a3a4a; border-color: #6ab0d0; color: #c0e0f0; box-shadow: 0 0 4px #4a6a8a80; }

/* Weapon takes 2 slots - always rendered at top of the inventory grid. */
.slot.weapon-2x { grid-column: 1 / span 2; grid-row: 1; min-height: 54px; }
.slot.weapon-2x img { width: 42px; height: 42px; }
.slots { grid-auto-rows: minmax(56px, auto); grid-auto-flow: dense; }

/* Pill rows (tier/type/trigger/tag) - normal white text for readability */
.pillrow { display: flex; gap: 5px; flex-wrap: wrap; padding: 4px 14px; background: #1e1e1e; border-top: 1px solid #2a2a2a; align-items: center; }
.pillrow-label { color: #ccc; font-size: 10px; letter-spacing: 1px; margin-right: 6px; min-width: 60px; }
.pill { background: #2a2a2a; color: #fff; border: 1px solid #444; padding: 2px 8px; border-radius: 11px; font-size: 11px; cursor: pointer; user-select: none; opacity: 0.75; }
.pill:hover { opacity: 1; border-color: #888; }
.pill.on { opacity: 1; }
.pill.on:not(.t-COMMON):not(.t-RARE):not(.t-HEROIC):not(.t-MYTHIC):not(.t-CAULDRON):not(.t-BOON):not(.t-CRONE):not(.t-ELIXIR) { background: #6a5a1a; color: #ffd66b; border-color: #a8860b; }
.pill.dim { opacity: 0.3; }
.pill.dim:hover { opacity: 0.45; border-color: #444; }
/* Tri-state: include = yellow highlight (covered by .on above). Exclude = red strikethrough */
.pill.exclude { background: #4a1a1a !important; color: #ff9a9a !important; border-color: #c74040 !important; text-decoration: line-through; opacity: 1; }
.pill.exclude:hover { background: #5a2020 !important; }
.pill-cnt { color: #aaa; font-size: 9px; margin-left: 2px; }

/* TIER pills - bigger, always show their color (dim when off) */
#tierRow { padding: 8px 14px; gap: 8px; background: #1a1a1a; border-bottom: 1px solid #2a2a2a; }
#tierRow .pillrow-label { font-size: 12px; font-weight: 700; color: #888; min-width: 70px; }
#tierRow .pill { font-size: 14px; font-weight: 700; padding: 6px 16px; border-radius: 16px; border-width: 2px; }
.pill.t-COMMON   { color: #ccc;    border-color: #777; }
.pill.t-COMMON.on   { background: #3a3a3a;  border-color: #aaa;    color: #fff;    }
.pill.t-RARE     { color: #9bc8ff; border-color: #4aa7ff; }
.pill.t-RARE.on     { background: #1a3a6a;  border-color: #6cb6ff; color: #cfe6ff; }
.pill.t-HEROIC   { color: #ffd84a; border-color: #d1a526; }
.pill.t-HEROIC.on   { background: #5a4a0f;  border-color: #ffd66b; color: #fff0aa; }
.pill.t-MYTHIC   { color: #d9a6ff; border-color: #d24cff; }
.pill.t-MYTHIC.on   { background: #4a1a6a;  border-color: #e070ff; color: #f0d6ff; }
.pill.t-CAULDRON { color: #b8ffa0; border-color: #8bff6a; }
.pill.t-CAULDRON.on { background: #2a5a1a;  border-color: #b8ff80; color: #d8ffba; }
.pill.t-BOON     { color: #ffb4b4; border-color: #cc6666; }
.pill.t-BOON.on     { background: #5a2a2a;  border-color: #ee8888; color: #ffd0d0; }
.pill.t-CRONE    { color: #e0a0ff; border-color: #b07ce0; }
.pill.t-CRONE.on    { background: #3a1a4a;  border-color: #e0a0ff; color: #f0d0ff; }
.pill.t-ELIXIR   { color: #aaffe0; border-color: #6ad0a0; }
.pill.t-ELIXIR.on   { background: #1a4a3a;  border-color: #80e0b0; color: #c0ffe0; }

#logWrap { margin: 10px; padding: 10px; background: #222; border: 1px solid #333; border-radius: 6px; max-height: 70vh; overflow-y: auto; }
#battleLog { font-family: monospace; font-size: 12px; line-height: 1.55; }
#battleLog .hero { color: #9bf0ff; font-weight: 600; }
#battleLog .opp  { color: #ff9b9b; font-weight: 600; }
#battleLog .result { color: #ffd66b; font-weight: bold; font-size: 14px; margin: 8px 0; padding: 6px; background: #2a2a15; border-radius: 4px; }
#battleLog .trig { color: #b9ffb9; font-weight: 600; }
#battleLog .phase { color: #888; font-size: 11px; margin-top: 8px; padding: 2px 4px; background: #1a1a1a; border-radius: 3px; }
#battleLog .turn-head { color: #888; font-size: 11px; margin: 8px 0 2px; padding: 2px 6px; background: #1a1a1a; border-left: 3px solid #444; font-weight: 600; letter-spacing: 1px; }
#battleLog .turn-head.hero { border-left-color: #9bf0ff; color: #9bf0ff; }
#battleLog .turn-head.opp  { border-left-color: #ff9b9b; color: #ff9b9b; }
#battleLog .stat-acid    { color: #9eff6b; }
#battleLog .stat-poison  { color: #b26aff; }
#battleLog .stat-riptide { color: #6ac8ff; }
#battleLog .stat-freeze  { color: #a0d8ff; }
#battleLog .stat-stun    { color: #ffe56b; }
#battleLog .stat-thorns  { color: #a8e87a; }
#battleLog .stat-regen   { color: #7dffb5; }
#battleLog .noop { color: #555; font-style: italic; }

.controls button { background: #333; color: #ddd; border: 1px solid #555; padding: 5px 12px; cursor: pointer; border-radius: 4px; font-size: 13px; }
.controls button:hover { background: #555; }
#runBtn { background: #6a5a1a; border-color: #a8860b; color: #ffd66b; font-weight: 600; }
.controls input[type=number], .controls input[type=text] { background: #111; color: #ddd; border: 1px solid #333; padding: 5px 8px; border-radius: 4px; font-size: 13px; }

/* Slot tooltip popover */
.tooltip { position: fixed; z-index: 200; max-width: 340px; background: #2a2a2a; border: 1px solid #555; border-radius: 6px; padding: 10px; font-size: 12px; box-shadow: 0 6px 20px #000a; user-select: text; }
.tooltip .tt-copy { display: inline-block; margin-top: 8px; font-size: 11px; padding: 3px 8px; background: #1a3a6a; color: #cfe6ff; border: 1px solid #4a8ab0; border-radius: 3px; cursor: pointer; }
.tooltip .tt-copy:hover { background: #2a4a7a; }
.tooltip .tt-copy.copied { background: #2a5a1a; color: #d0f0a0; border-color: #5a8a2a; }
.tooltip.hidden { display: none; }
.tooltip .tt-h { display: flex; gap: 10px; align-items: center; }
.tooltip .tt-h img { width: 44px; height: 44px; image-rendering: pixelated; background: #111; border-radius: 4px; }
.tooltip .tt-n { font-size: 14px; font-weight: 700; }
.tooltip .tt-s { color: #888; font-size: 11px; }
.tooltip .tt-stats { display: flex; gap: 10px; margin-top: 8px; font-size: 11px; padding: 5px; background: #1a1a1a; border-radius: 4px; }
.tooltip .tt-stats b { color: #ffd66b; font-size: 13px; }
.tooltip .tt-desc { margin-top: 8px; padding: 6px; background: #1a1a1a; border-radius: 4px; color: #ddd; line-height: 1.45; }
.tooltip .tt-mods { margin-top: 8px; background: #1a1a1a; border-radius: 4px; padding: 6px; }
.tooltip .tt-mods .tt-lbl { color: #888; font-size: 10px; letter-spacing: 1px; margin-bottom: 3px; }
.tooltip .ttmod { font-family: monospace; font-size: 11px; padding: 2px 0; }
.tooltip .ttmod b { color: #ffd66b; }
.tooltip .tt-tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 3px; }
.tooltip .tt-tag { background: #333; color: #bbb; padding: 1px 6px; border-radius: 3px; font-size: 10px; }
.tooltip .tt-meta { margin-top: 8px; padding: 6px; background: #16203a; border-left: 3px solid #4a6ba0; border-radius: 3px; font-size: 11px; color: #cfd8e8; }
.tooltip .tt-meta .tt-lbl2 { color: #8aa8d8; font-weight: 600; margin-right: 4px; }
.tooltip .tt-unique { margin-top: 4px; color: #ffc94a; font-size: 10px; font-style: italic; }
.tooltip .tt-tier { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; margin-left: 6px; vertical-align: middle; }
.tooltip .tt-tier-G { background: #5a4a0f; color: #ffd66b; border: 1px solid #a8860b; }
.tooltip .tt-tier-D { background: #1a3a6a; color: #b9f2ff; border: 1px solid #5fe0ff; }
.tooltip .tt-recipe { margin-top: 8px; background: #2a1a1a; border: 1px solid #6a5a1a; border-radius: 4px; padding: 6px; }
.tooltip .tt-recipe .tt-lbl { color: #d8c040; font-size: 10px; letter-spacing: 1px; margin-bottom: 4px; }
.tooltip .tt-ing { display: inline-flex; align-items: center; gap: 3px; background: #1a1a1a; padding: 2px 6px; border-radius: 3px; font-size: 11px; margin: 2px; }
.tooltip .tt-ing img { width: 16px; height: 16px; image-rendering: pixelated; }
.tooltip .tt-close { color: #666; font-size: 10px; margin-top: 6px; text-align: right; font-style: italic; }

/* Slot marked as unreachable from the active 3 bundles. Red border + dim
   sprite so the user notices the build can't be assembled in-game. */
.slot.unreachable { border-color: #c0392b; box-shadow: 0 0 0 1px #c0392b inset; }
.slot.unreachable img { opacity: 0.55; }
.slot.unreachable .si .n { color: #ff8a72; }
.unreach-tag { position: absolute; left: 4px; top: 4px; font-size: 9px;
  background: #c0392b; color: #fff; padding: 1px 4px; border-radius: 2px;
  letter-spacing: 0.5px; }

/* Status pill row colors */
.pill.st-acid.on        { background: #2a3a1a; color: #b8ffa0; }
.pill.st-poison.on      { background: #3a1a3a; color: #d9a6ff; }
.pill.st-stun.on        { background: #3a2a1a; color: #ffc94a; }
.pill.st-thorns.on      { background: #2a3a1a; color: #b8ffa0; }
.pill.st-freeze.on      { background: #1a2a4a; color: #b9f2ff; }
.pill.st-riptide.on     { background: #1a3a4a; color: #6fdfff; }
.pill.st-regeneration.on{ background: #1a3a2a; color: #8eff8e; }
.pill.st-purity.on      { background: #3a3a3a; color: #ffffff; }
.pill.sk-1.on        { background: #3a2a4a; color: #d9b6ff; }
.pill.sk-2.on        { background: #4a2a4a; color: #f0a0ff; }
.pill.sk-3plus.on    { background: #5a1a3a; color: #ff8acc; }
.pill.sk-variable.on { background: #2a2a3a; color: #c9c0ff; }

/* Pre-strike ATK multiplier annotation (e.g. "×2 vs БРН") */
.bs-mult { color: #ffc94a; font-size: 10px; font-weight: 400; margin-left: 4px; }