.ic { --ic-fs: max(1rem, 14px); --ic-small: max(.86em, 13px); font-size: var(--ic-fs); line-height: 1.35; }
.tooltip:has(> .ic) { min-width: 0; max-width: none; }
.tooltip > .ic { width: max-content; min-width: 23.5em; max-width: min(27em, calc(100vw - 1rem)); }
.tooltip > .ic.is-detail { max-width: min(30em, calc(100vw - 1rem)); }

.tip-line .tl-dot { flex: none; width: .45rem; height: .45rem; rotate: 45deg; background: var(--line); box-shadow: 0 0 0 1px rgba(0, 0, 0, .75); }
.tip-line:has(> .tl-dot) .tl-text { color: var(--text-1); }
.tip-line.is-top .tl-tier { color: #120d06; background: var(--line); border-color: var(--line); }
.tip-line.is-under .tl-tier { background: transparent; border-color: color-mix(in srgb, var(--line) 70%, transparent); }

.ic .tip-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7em; padding: .7em .85em .6em; }
.ic .tip-head .well { width: 3.2em; }
.ic .tip-head h4 { font: 600 1.2em/1.15 var(--font-display); }
.ic .tip-head h4 .tip-rank { font-size: max(.85em, 13px); }
.ic .tip-head small { margin-top: .15em; font-size: var(--ic-small); line-height: 1.3; color: var(--text-3); }
.ic .tip-head .ic-where { margin-top: 0; color: var(--text-2); }
.ic .ic-level { align-self: start; padding-top: .15em; font: 600 var(--ic-small) var(--font-num); color: var(--text-2); white-space: nowrap; }
.ic .ic-plate-side { align-self: start; display: grid; justify-items: end; gap: 3px; }
.ic .ic-role-tag { padding: 1px 7px; border-radius: 999px; font: 700 var(--ic-small) var(--font-ui); letter-spacing: .04em; white-space: nowrap; border: 1px solid; }
.ic .ic-role-tag.is-tank { color: #a9c6e8; border-color: rgba(140, 180, 230, .45); background: rgba(70, 110, 160, .18); }
.ic .ic-role-tag.is-power { color: #ffc27a; border-color: rgba(255, 160, 80, .5); background: rgba(190, 90, 30, .2); }

.ic .tip-body { padding: .55em .85em .7em; gap: 0; font-size: 1em; color: var(--text-2); }
.ic .tip-block { gap: .35em; padding: .55em 0; }
.ic .tip-row { align-items: baseline; font-size: 1em; }
.ic .tip-row > span { min-width: 0; color: var(--text-2); }
.ic .tip-row b { font: 600 1em var(--font-num); }
.ic .tip-note { font-size: var(--ic-small); line-height: 1.4; }
.ic .tip-special { font-size: var(--ic-small); line-height: 1.4; padding: .35em .5em; }
.ic .tip-prose p { font-size: 1em; }
.ic .chip { font-size: var(--ic-small); padding: .15em .55em; gap: .3em; }
.ic .chip .ia-glyph { width: .95em; height: .95em; }
.ic .ia-glyph { width: 1em; height: 1em; }
.ic .ic-role { display: flex; align-items: center; gap: .4em; color: var(--text-2); }
.ic .ic-role .ia-glyph { flex: none; color: var(--gold-2); }

.ic .ic-bonus { container-type: inline-size; margin-bottom: .2em; }
.ic .ic-grid { display: grid; grid-template-columns: 4.6em repeat(5, minmax(0, 1fr)); align-items: baseline; }
.ic .ic-g { grid-row: var(--r); grid-column: var(--c); padding: .18em .2em; text-align: right; white-space: nowrap; }
.ic .ic-gh { font: 600 var(--ic-small) var(--font-ui); letter-spacing: .02em; color: var(--text-3); border-bottom: 1px solid var(--edge-soft); }
.ic .ic-gl { text-align: left; font: 500 var(--ic-small) var(--font-ui); color: var(--text-3); }
.ic .ic-gv { font: 700 max(.92em, 13px) var(--font-num); color: var(--text-1); }
.ic .ic-gv.is-bad { color: var(--crimson); }
.ic .ic-gv.is-zero { color: var(--text-4); font-weight: 500; }
@container (max-width: 21em) {
  .ic .ic-grid { grid-template-columns: minmax(4.6em, 1fr) repeat(var(--n), minmax(0, 6em)); }
  .ic .ic-g { grid-row: var(--c); grid-column: var(--r); }
  .ic .ic-gh { text-align: left; border-bottom: 0; border-top: 1px solid rgba(255, 255, 255, .04); font-weight: 500; }
  .ic .ic-gl { text-align: right; font-weight: 600; border-bottom: 1px solid var(--edge-soft); }
}

.ic .tip-lines { gap: .3em; }
.ic .tip-line { --line: var(--tip-rar, var(--text-1)); flex-wrap: wrap; gap: .2em .5em; font: 700 1em/1.3 var(--font-num); color: var(--text-1); }
.ic .tip-line .tl-text { color: var(--text-1); }
.ic .tip-line .tl-dot { flex: none; width: .5em; height: .5em; rotate: 45deg; background: var(--line); box-shadow: 0 0 0 1px rgba(0, 0, 0, .75); }
.ic .tip-line small { font: 500 var(--ic-small)/1.2 var(--font-ui); letter-spacing: .02em; text-transform: none; color: var(--text-3); }
.ic .tip-line .tl-tier { min-width: 2em; height: 1.4em; padding: 0 .35em; border-radius: .35em; font: 800 var(--ic-small)/1 var(--font-num); color: var(--line); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); background: transparent; }
.ic .tip-line.is-top .tl-tier { color: #120d06; background: var(--line); border-color: var(--line); }
.ic .tip-line.is-greater .tl-tier { color: #120d06; background: var(--line); border-color: var(--gold-1); box-shadow: 0 0 0 1px var(--gold-1); }
.ic .tip-line .tl-more { flex: 1 0 100%; padding-left: 1em; font-weight: 400; line-height: 1.4; color: var(--text-3); }
.ic .tip-line .tl-more b { font-weight: 600; color: var(--text-2); }
.ic .tip-line.is-empty { color: var(--text-3); font-weight: 600; }
.ic .tip-line.is-empty .tl-text { color: var(--text-3); }
.ic .tip-line.is-empty .tl-text::before { width: .75em; height: .75em; margin-right: .45em; }
.ic .tip-line.is-imbue .tl-text { color: var(--gold-1); }
.ic .tip-line.is-imbue.is-open .tl-text { color: var(--text-3); }
.ic .tip-line.is-imbue .ia-glyph { width: 1.05em; height: 1.05em; }
.ic .tip-line.is-signature .tl-text { color: var(--gold-1); }
.ic .tip-line.is-signature .tl-text::before { width: .45em; height: .45em; }

.ic .tip-req { gap: .35em; }
.ic .tip-kept { color: var(--text-2); }

.ic .tip-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: .1em .6em; padding: .45em .6em; }
.ic .tip-compare > span { font: 700 var(--ic-small) var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-3); }
.ic .tip-compare > b { font: 600 1.4em/1 var(--font-num); color: var(--text-1); }
.ic .tip-compare > em { font: 700 1em var(--font-num); font-style: normal; opacity: 1; }
.ic .tip-compare > small { grid-column: 2 / -1; justify-self: end; font-size: var(--ic-small); color: var(--text-3); }
.ic .tip-compare.is-worn { grid-template-columns: auto minmax(0, 1fr) auto; color: var(--emerald); }
.ic .tip-compare.is-worn > span { letter-spacing: .06em; color: var(--emerald); }
.ic .tip-compare.is-worn .ia-glyph { color: var(--emerald); }
.ic .ic-basis { margin: 0; font-size: var(--ic-small); color: var(--text-3); }
.ic .ic-split { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2em 1em; margin: 0; font-size: var(--ic-small); color: var(--text-3); }
.ic .ic-split b { font-weight: 600; color: var(--text-2); }
.ic .ic-split em, .ic .ic-delta em { font-style: normal; font-weight: 700; }
.ic .up, .ic .is-up > em { color: var(--emerald); }
.ic .down, .ic .is-down > em { color: var(--crimson); }
.ic .ic-deltas { display: grid; gap: .15em; }
.ic .ic-delta { display: grid; grid-template-columns: minmax(0, 1fr) auto 6.6em; align-items: baseline; gap: .6em; }
.ic .ic-delta > span { min-width: 0; color: var(--text-2); }
.ic .ic-delta > span small { font-size: var(--ic-small); color: var(--text-3); }
.ic .ic-delta > b { font: 600 1em var(--font-num); color: var(--text-1); }
.ic .ic-delta > em { text-align: right; font: 700 max(.92em, 13px) var(--font-num); white-space: nowrap; }

.ic .tip-pips i { width: .5em; height: .5em; }
.ic .tip-set .t-caps { font-size: var(--ic-small); }
.ic .tip-set li { font-size: 1em; }
.ic .ic-sources .src-btn { width: 1.8em; height: 1.8em; }
.ic .tip-foot { padding: .45em .85em; font-size: var(--ic-small); }
.ic .tip-foot kbd { font: 600 1em var(--font-num); padding: 0 .3em; border-radius: .25em; border: 1px solid var(--edge-soft); background: rgba(255, 255, 255, .05); color: var(--text-2); }
.ic .tip-offer .offer-head b, .ic .tip-offer .offer-col .tip-line { font-size: 1em; }
.ic .tip-offer .offer-head small, .ic .tip-offer .offer-col > .t-caps, .ic .tip-offer .offer-power, .ic .tip-offer .btn { font-size: var(--ic-small); }

.tooltip.is-pinned { pointer-events: auto; overflow-y: auto; max-height: calc(100vh - 1rem); overscroll-behavior: contain; }
.ic .ic-pinbar { display: flex; align-items: center; gap: .5em; padding: .4em .5em .4em .85em; border-bottom: 1px solid var(--edge-soft); background: rgba(0, 0, 0, .3); }
.ic .ic-pinbar .t-caps { flex: 1; display: inline-flex; align-items: center; gap: .35em; font-size: var(--ic-small); color: var(--gold-3); }
.ic .ic-pinbar .btn { min-height: 2em; font-size: var(--ic-small); }
.ic .ic-pinbar .ic-detail-btn[aria-pressed="true"] { border-color: var(--gold-2); color: var(--gold-1); }
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .tooltip.is-pinned { left: .4rem !important; right: .4rem; top: auto !important; bottom: var(--nav, 4.1rem); width: auto; max-height: min(72dvh, calc(100dvh - var(--nav, 4.1rem) - env(safe-area-inset-top) - 4rem)); border-bottom: 0; border-radius: 1.1rem 1.1rem 0 0; background: linear-gradient(180deg, rgb(20, 30, 48), rgb(8, 13, 22)); overscroll-behavior: contain; }
  .tooltip.is-pinned::before { content: ""; position: absolute; z-index: 1; left: 50%; top: .4rem; width: 2.9rem; height: .32rem; margin-left: -1.45rem; border-radius: 1rem; background: rgba(242, 198, 106, .5); pointer-events: none; }
  .tooltip.is-pinned > .ic { width: auto; min-width: 0; max-width: none; }
  .tooltip.is-pinned > :not(.ic) { padding-top: .6rem; }
  .ic .ic-pinbar { padding-top: 1rem; }
  .ic .ic-pinbar .btn { min-height: 44px; }
  .ic .ic-pinbar .btn-icon { width: 44px; }
  :is([data-tip], [data-tip-copy], [data-tip-worn], [data-tip-spell], [data-tip-power], [data-tip-people]), :is([data-tip], [data-tip-copy], [data-tip-worn]) img { -webkit-touch-callout: none; }
}
@media (max-height: 500px) and (pointer: coarse) {
  .tooltip.is-pinned { left: auto !important; right: calc(var(--rail, 0px) + .3rem); bottom: 0; width: min(28rem, calc(100% - var(--rail, 0px) - 1rem)); max-height: calc(100dvh - .6rem); padding-bottom: env(safe-area-inset-bottom); }
}

.ic.is-panel { min-width: 0; }
.ic.is-panel .tip-head { padding: .2em 0 .6em; background: none; }
.ic.is-panel .tip-body { padding: 0; }