/* Collection size and evolution are independent, explicit axes. */
.element-guide, .element-collection-detail { color: #f5ead7; font-size: 13px; line-height: 1.4; min-width: 0; }
.element-guide { padding: 18px; border: 1px solid #b9945266; border-radius: 14px; background: linear-gradient(120deg, #c79a2915, #43bbae0d), #071a1b; }
.element-guide h3 { margin: 0 0 16px; color: #ffe1a0; font-size: 20px; }
.element-guide-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.element-guide-steps > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-content: start; gap: 7px 10px; }
.element-guide-step { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #e8c07877; border-radius: 50%; color: #ffe1a0; font-weight: 900; background: #d2a94815; }
.element-guide h4 { margin: 3px 0; font-size: 15px; color: #f7ecd9; }
.element-guide-steps p { grid-column: 2; margin: 0; color: #c0d1cc; }
.element-guide-steps .element-milestones, .element-evolution-key { grid-column: 2; }
.element-guide-example { margin-top: 18px; border-top: 1px solid #b9945238; padding-top: 10px; }
.element-guide-example summary { padding: 6px 0; cursor: pointer; color: #ffe1a0; font-weight: 700; }
.element-guide-example img { display: block; width: 100%; height: auto; margin-top: 10px; border-radius: 9px; }
.element-evolution-key { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.element-evolution-key > span { padding: 5px 12px; border: 1px solid currentColor; border-radius: 7px; font-weight: 800; }
.evolution-1 { color: #bd9c7a; }
.evolution-2 { color: #d9e5ef; }
.evolution-3 { color: #ffda6f; }
.element-milestones { display: flex; align-items: center; gap: 6px; }
.element-milestones > span { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; gap: 6px; flex: 1; padding: 5px 8px; border: 1px solid #78958c40; border-radius: 7px; background: #658b8110; color: #b8c6c1; }
.element-milestones b { font-size: 20px; font-variant-numeric: tabular-nums; }
.element-milestones small { font-size: 10px; }
.element-milestones .is-complete { color: #a9f0c6; border-color: #75d6a270; background: #54be7a16; }
.element-collection-detail { display: grid; gap: 10px; }
.element-collection-current { display: grid; gap: 3px; }
.element-collection-current > strong { color: #ffe1a0; font-size: 14px; }
.element-collection-current > span { color: #becdc6; font-size: 12px; }
.element-collection-detail p { margin: 0; line-height: 1.45; }
.element-collection-rule { color: #c0d1cc; font-size: 12px; }
.element-tier-matrix { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 4px; font-variant-numeric: tabular-nums; text-align: center; }
.element-tier-matrix caption { margin-bottom: 6px; text-align: left; color: #becdc6; font-size: 11px; }
.element-tier-matrix th { padding: 5px 2px; font-size: 12px; font-weight: 800; }
.element-tier-matrix th:first-child { width: 24%; }
.element-tier-matrix th > small { display: block; margin-top: 2px; color: #9fb5ad; font-size: 10px; font-weight: 500; }
.element-tier-matrix tbody th { text-align: left; }
.element-tier-matrix td { padding: 7px 3px 5px; border: 1px solid #81948f36; border-radius: 7px; background: #5970660c; }
.element-tier-matrix td > strong, .element-tier-matrix td > span, .element-tier-matrix td > small { display: block; }
.element-tier-matrix td > strong { font-size: 15px; color: #d2ddd7; }
.element-tier-matrix td > span { margin-top: 2px; color: #b5cfc1; font-size: 11px; }
.element-tier-matrix td i { font-size: 9px; font-style: normal; }
.element-tier-matrix td > small { margin-top: 4px; color: #9ab0a6; font-size: 9px; font-weight: 750; }
.element-tier-matrix td.is-locked { background: #00000020; }
.element-tier-matrix td.is-unlocked { border-color: #77b39666; background: #499e6312; }
.element-tier-matrix td.is-current { border: 2px solid #f1c76c; padding: 6px 2px 4px; background: #e6b64b1c; box-shadow: 0 0 12px #edc06510; }
.element-tier-matrix td.is-current > strong, .element-tier-matrix td.is-current > small { color: #ffe098; }
.element-collection-next { padding: 9px 10px; border-left: 3px solid var(--trait-color, #d7a94a); border-radius: 0 6px 6px 0; background: #ffffff07; color: #f7e3b9; font-size: 12px; }
.element-collection-note { color: #99b2a7; font-size: 10px; line-height: 1.4; }
.element-total-bonus { display: grid; gap: 4px; padding: 10px; border: 1px solid #adcaaf30; border-radius: 8px; background: #83bd920a; }
.element-total-bonus > strong { font-size: 13px; color: #d0edd4; }
.element-total-bonus > span { font-size: 11px; color: #c7d1be; }
.element-total-bonus > small { font-size: 10px; color: #a8b9ae; line-height: 1.4; }
.element-model-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.element-model { --element-model-icon-size: 40px; display: grid; grid-template-columns: var(--element-model-icon-size) minmax(0, 1fr) auto; align-items: center; gap: 9px; min-width: 0; min-height: 54px; padding: 6px; border: 1px solid #9aac9d2a; border-radius: 7px; background: #071714; }
/* Shop icon rules must not expand the artwork into the model name column. */
.element-model-roster .element-model > .choice-icon.tower-sprite { grid-column: 1; grid-row: 1; position: relative; inset: auto; width: var(--element-model-icon-size) !important; height: var(--element-model-icon-size) !important; min-width: var(--element-model-icon-size) !important; max-width: var(--element-model-icon-size) !important; min-height: var(--element-model-icon-size) !important; max-height: var(--element-model-icon-size) !important; margin: 0; padding: 0; overflow: hidden; transform: none; }
.element-model-roster .element-model > .tower-sprite > img { position: static; inset: auto; display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; margin: 0; padding: 0; transform: none; }
.element-model > .element-model-label { grid-column: 2; grid-row: 1; position: relative; text-align: left; }
.element-model > span { min-width: 0; }
.element-model strong { display: block; overflow-wrap: anywhere; font-size: 11px; font-weight: 700; color: #e7e5d7; }
.element-model small { display: block; font-size: 10px; color: #b0c0b4; }
.element-model > b { grid-column: 3; grid-row: 1; font-size: 13px; font-weight: 850; }
.element-model.is-missing { border-style: dashed; background: #04100e; }
.element-model.is-missing > .tower-sprite { filter: grayscale(1); opacity: .55; }
.element-model.is-missing strong, .element-model.is-missing small { color: #a2b1a6; }
.element-collections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
/* WebKit must lay out the offscreen collection cards to scroll them into view. */
#traitsOverlay:has(.element-guide) .traits-section { content-visibility: visible !important; contain-intrinsic-size: none !important; }
.element-collection-card.is-open { grid-column: 1 / -1; }
.element-collection-card .trait-card-toggle { grid-template-columns: minmax(0, 1fr) auto 14px; }
.element-collection-card .trait-card-main em { white-space: normal; line-height: 1.4; color: #d9caa4; }
.element-collection-card .trait-summary-preview { white-space: normal; overflow: visible; line-height: 1.4; }
.element-collection-card .trait-tier { min-width: 38px; font-size: 12px; }
body.match-active:not(.mobile-ui) #traitsOverlay:has(.element-guide) .traits-panel { width: min(980px, calc(100vw - 48px)); }
body.match-active:not(.mobile-ui) .traits-panel .element-collection-card.is-open .trait-card-detail { padding: 12px 16px; grid-template-columns: minmax(0, 1fr); }
body.match-active:not(.mobile-ui) .element-collection-card .element-model-roster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.match-active:not(.mobile-ui) .desktop-trait-popover.game-tooltip-surface:has(.element-collection-detail) { width: min(430px, calc(100vw - 210px)); max-height: min(76vh, 760px); gap: 8px; background: #081b18f7; }
body.mobile-ui.match-active #mobileTraitPopover:has(.element-collection-detail),
body.mobile-battle-layout.mobile-game-v2.mobile-landscape.mobile-ui.match-active #mobileTraitPopover:has(.element-collection-detail) { width: min(370px, calc(100vw - 24px)) !important; max-width: min(370px, calc(100vw - 24px)) !important; background: #081b18f7; }
.desktop-trait-popover .element-milestones, .mobile-trait-popover .element-milestones { display: none; }
.desktop-trait-popover .element-collection-detail, .mobile-trait-popover .element-collection-detail { gap: 7px; }
.mobile-trait-popover .element-collection-detail { gap: 4px; }
.mobile-trait-popover .element-tier-matrix td { padding: 2px; }
.mobile-trait-popover .element-tier-matrix td.is-current { padding: 1px; }
.mobile-trait-popover .element-tier-matrix td > strong { line-height: 16px; }
.mobile-trait-popover .element-tier-matrix td > span { margin-top: 1px; line-height: 11px; }
.mobile-trait-popover .element-tier-matrix td > small { margin-top: 1px; line-height: 9px; }
.mobile-trait-popover .element-tier-matrix caption { font-size: 10px; margin-bottom: 2px; }
body.mobile-ui.match-active #traitsOverlay:has(.element-guide) .traits-panel { display: flex !important; flex-direction: column; width: min(520px, calc(100vw - 24px)) !important; max-width: calc(100vw - 24px) !important; bottom: calc(var(--mg-safe-bottom, 0px) + 8px) !important; overflow: hidden !important; }
body.mobile-ui.match-active #traitsOverlay:has(.element-guide) .traits-panel-header { flex: 0 0 auto; }
body.mobile-ui.match-active #traitsOverlay:has(.element-guide) .traits-panel-content { flex: 1 1 auto; min-height: 0 !important; max-height: none !important; }
body.mobile-ui .element-guide { padding: 12px; }
body.mobile-ui .element-guide h3 { font-size: 17px; margin-bottom: 12px; }
body.mobile-ui .element-guide-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
body.mobile-ui .element-guide h4 { font-size: 13px; }
body.mobile-ui .element-guide-steps p { font-size: 12px; }
body.mobile-ui .element-collections-grid { grid-template-columns: minmax(0, 1fr); }
body.mobile-ui .element-collection-card .trait-card-detail { padding: 9px; }
body.mobile-ui .element-collection-card .trait-card-main { align-items: start; }
body.mobile-ui .element-collection-card .trait-card-main em { font-size: 11px; }
body.mobile-ui .element-collection-card .trait-summary-preview { font-size: 10px; }
body.mobile-ui .element-tier-matrix { border-spacing: 3px; }
body.mobile-ui .element-tier-matrix th { font-size: 11px; }
body.mobile-ui .element-tier-matrix th > small { font-size: 9px; }
@media (max-width: 380px) {
  .element-tier-matrix th > small { font-size: 8px; }
  .element-model { --element-model-icon-size: 32px; gap: 8px; padding: 4px; }
}