/* Generated spell scenes replace the former character previews in upgrade/talent cards. */
.upgradeLook { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; pointer-events: none; }
.skillArt { position: relative; display: inline-block; width: 44px; height: 44px; flex: 0 0 44px; overflow: hidden; background: #1b1624; border: 1px solid #8f774c; border-radius: 4px; box-sizing: border-box; vertical-align: middle; }
.skillArt > img { position: absolute; display: block; width: 400%; height: 300%; max-width: none; max-height: none; margin: 0; image-rendering: pixelated; pointer-events: none; }
.skillArtLarge { width: 84px; height: 84px; flex-basis: 84px; border-color: #b69962; }
.skillTipHead { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 8px; }
.skillTipHead > div { min-width: 0; }.skillTipHead .tipDesc { margin-bottom: 0; }
#tooltip:has(.skillTipHead) { max-width: min(360px, calc(100vw - 16px)); }
.pathBox.compactPath { border: 0; border-image: none; background: none; padding: 0; margin-top: 7px; }
.compactPath > .btn.wide.pathBtn { margin-top: 0; }
#tooltip .tipPathDetails { padding-top: 6px; border-top: 1px solid rgba(90,58,42,.22); font-size: 11.5px; }
.btn.wide.pathBtn.hasUpgradeLook { position: relative; padding-left: 54px; min-height: 52px; }
.pathBtn.hasUpgradeLook > .upgradeLook { position: absolute; left: 3px; top: 50%; transform: translateY(-50%); }
.talentNode.hasUpgradeLook { position: relative; padding-left: 56px; min-height: 58px; }
.talentNode.hasUpgradeLook > .upgradeLook { position: absolute; left: 5px; top: 5px; }
@media (max-width: 640px), (max-height: 800px) {
  .btn.wide.pathBtn.hasUpgradeLook { padding-left: 51px; }
  .talentNode.hasUpgradeLook { padding-left: 52px; }
  .talentNode.hasUpgradeLook > .upgradeLook { left: 3px; }
}

/* Team selection: each path is a row of four illustrated skills; prose stays in the tooltip. */
:is(#pickPreview, #co2UnitPreview) .pvPaths.pvSkillPaths { grid-template-columns: minmax(0, 1fr); gap: 10px; }
:is(#pickPreview, #co2UnitPreview) .pvSkillPaths > .pvPath { border: 0; border-radius: 0; padding: 0; background: none; }
:is(#pickPreview, #co2UnitPreview) .pvSkillPaths .pvPathHead { margin-bottom: 5px; line-height: 1.3; }
:is(#pickPreview, #co2UnitPreview) .pvSkillGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
:is(#pickPreview, #co2UnitPreview) .pvSkillBtn {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 5px;
  min-width: 0; min-height: 44px; margin: 0; padding: 4px;
  border: 1px solid #55433f; border-radius: 5px; background: #211926;
  color: var(--text); font: inherit; font-size: 10.5px; line-height: 1.2; text-align: center;
  cursor: url("../assets/ui/cursorGauntlet_bronze.png") 10 4, pointer;
  -webkit-tap-highlight-color: rgba(240, 192, 64, .18); touch-action: manipulation;
}
:is(#pickPreview, #co2UnitPreview) .pvSkillBtn > .skillArt { display: block; width: 100%; height: auto; aspect-ratio: 1; flex: none; }
:is(#pickPreview, #co2UnitPreview) .pvSkillTier {
  position: absolute; top: 7px; left: 7px; z-index: 1;
  padding: 2px 4px; border: 1px solid rgba(215, 180, 112, .5); border-radius: 3px;
  background: rgba(21, 15, 27, .92); color: #efd8a3; font-size: 9px; font-weight: 700; line-height: 1;
  pointer-events: none;
}
:is(#pickPreview, #co2UnitPreview) .pvSkillName {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  min-width: 0; min-height: 2.4em; overflow: hidden; overflow-wrap: anywhere;
}
:is(#pickPreview, #co2UnitPreview) .pvSkillPrice { margin-top: auto; color: var(--gold); font-size: 10px; white-space: nowrap; }
:is(#pickPreview, #co2UnitPreview) .pvSkillPrice .gi { width: 10px; height: 10px; vertical-align: -1px; }
:is(#pickPreview, #co2UnitPreview) .pvSkillBtn.leg { border-color: #9c703e; }
:is(#pickPreview, #co2UnitPreview) .pvSkillBtn.leg .pvSkillTier { border-color: #d39b53; color: #ffcf7d; }
:is(#pickPreview, #co2UnitPreview) .pvSkillBtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--gold); }
:is(#pickPreview, #co2UnitPreview) .pvSkillBtn[aria-expanded="true"] { border-color: var(--gold); background: #35263b; }
:is(#pickPreview, #co2UnitPreview) .pvAbilityGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 5px 0 8px; }
:is(#pickPreview, #co2UnitPreview) .pvAbilityGrid .pvSkillBtn {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center;
  min-height: 62px; text-align: left;
}
:is(#pickPreview, #co2UnitPreview) .pvAbilityGrid .pvSkillBtn > .skillArt { grid-column: 1; grid-row: 1 / span 2; width: 52px; }
:is(#pickPreview, #co2UnitPreview) .pvAbilityGrid .pvSkillName { grid-column: 2; grid-row: 1 / span 2; }
@media (hover: hover) {
  :is(#pickPreview, #co2UnitPreview) .pvSkillBtn:hover { border-color: var(--gold); background: #35263b; }
}
#tooltip.previewSkillTip {
  box-sizing: border-box; width: min(380px, calc(100vw - 16px)); max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px);
  overflow-y: auto; overscroll-behavior: contain; pointer-events: auto;
}
#tooltip.previewSkillTip .tipTitle { overflow-wrap: anywhere; }
#tooltip.previewSkillTip .skillTipHead { gap: 9px; }
#tooltip.previewSkillTip .skillArtLarge { flex-shrink: 0; }
/* Boss loot uses the same rarity color in the bag, tooltip and reveal. */
.powerSlot { box-shadow: inset 0 0 0 2px var(--loot-color, #b99a59); }
.powerSlot.active { outline: 2px solid var(--loot-color, #b99a59); }
.powerSlot:focus-visible { outline: 3px solid #fff2c8; outline-offset: 2px; }
.powerSlot .skillArt { width: calc(34px * var(--power-scale, 1)); height: calc(34px * var(--power-scale, 1)); border-color: var(--loot-color); }
.powerSlot .powerCount { background: var(--loot-color, var(--gold)); }
.relicRow { margin: 8px 0; padding: 7px; border: 1px solid #715330; border-radius: 4px; background: #1b1624; }
.relicEmpty { color: var(--muted); font-size: 11px; }
.relicEquipped { display: flex; align-items: center; gap: 7px; margin-top: 5px; color: #f5b94c; font-size: 12px; }
.relicEquipped .skillArt { width: 32px; height: 32px; flex-basis: 32px; border-color: #b58a40; }
#tooltip.lootTip { background: #231c2d; color: #efe5d3; border-image: none; border: 1px solid #aa8953; box-shadow: 0 8px 28px #0009; border-radius: 7px; }
#tooltip.lootTip .tipDesc, #tooltip.lootTip .tipCost { color: #dfd0b8; }
#tooltip.lootTip .skillArtLarge { float: left; margin: 8px 10px 5px 0; }
#tooltip.lootTip .tipCost { clear: both; padding-top: 5px; }