/*! © 2026 Noxx Labs. All rights reserved. Noxx™ and Noxx Labs™ are trademarks of Noxx Labs. Proprietary: no licence is granted to copy, modify, host or redistribute any part of this code. noxxreplays.co.uk · build 6.1.0-f984a20 · 3d818a9198 */

.idn-c-playmaker { --c: #60a5fa; } .idn-c-striker { --c: #fb923c; } .idn-c-anchor { --c: #34d399; }
.idn-c-chaser { --c: #f472b6; } .idn-c-rotator { --c: #a78bfa; } .idn-c-aerial { --c: #22d3ee; }
.idn-c-demolisher { --c: #facc15; } .idn-c-dribbler { --c: #bef264; } .idn-c-allrounder { --c: #9ca3af; }
.idn-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.35rem; height: 1.35rem; margin-right: 0.35rem; border-radius: 50%;
  border: 1.5px solid var(--c, #9ca3af); color: var(--c, #9ca3af); font: 700 0.55rem/1 var(--mono, monospace); letter-spacing: 0.02em; vertical-align: -0.35rem; }
.idn-badge.big { width: 2.9rem; height: 2.9rem; margin-right: 0; font-size: 0.95rem; border-width: 2.5px; background: color-mix(in srgb, var(--c) 12%, transparent); }
.idn-card { background: var(--bg2, #111113); border: 1px solid var(--border, #26262a); border-radius: var(--radius2, 12px); padding: 0.85rem 1rem 0.7rem; }
.idn-head { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 0.7rem; }
.idn-name { font-size: 1.08rem; font-weight: 700; }
.idn-name em { font-style: normal; font: 600 0.78rem var(--mono, monospace); color: #0b0b0c; background: var(--accent, #E1FF3C); border-radius: 999px; padding: 0.1rem 0.45rem; margin-left: 0.35rem; vertical-align: 0.1rem; white-space: nowrap; }
.idn-line { margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--text2, #a6a6ad); line-height: 1.45; }
.idn-cols, .idn-pcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem 1.2rem; }
.idn-wh { font-size: 0.7rem; color: var(--text3, #9ca3af); text-transform: uppercase; letter-spacing: 0.05em; margin: 0.15rem 0 0.4rem; }
.idn-fit { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr) 2.6rem; gap: 0.45rem; align-items: center; font-size: 0.8rem; margin-bottom: 0.35rem; color: var(--text2, #a6a6ad); }
.idn-fit.me { color: var(--text, #f2f2f0); font-weight: 600; }
.idn-fit b { font: 600 0.78rem var(--mono, monospace); text-align: right; }
.idn-bar { height: 8px; border-radius: 4px; background: var(--surface, #1c1c1f); overflow: hidden; }
.idn-bar i { display: block; height: 100%; border-radius: 4px; background: var(--c); opacity: 0.55; }
.idn-fit.me .idn-bar i { opacity: 1; }
.idn-why { list-style: none; margin: 0; padding: 0; }
.idn-why li { display: flex; flex-direction: column; padding: 0.25rem 0 0.25rem 0.6rem; border-left: 2px solid var(--accent, #E1FF3C); margin-bottom: 0.35rem; }
.idn-why b { font-size: 0.82rem; font-weight: 600; }
.idn-why small { font-size: 0.7rem; color: var(--text3, #9ca3af); }
.idn-tip { font-size: 0.8rem; margin: 0.55rem 0 0.5rem; padding: 0.45rem 0.6rem; border-radius: 8px; background: var(--surface, #1c1c1f); color: var(--text2, #a6a6ad); line-height: 1.45; }
.idn-lobby { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.4rem; margin-top: 0.3rem; }
.idn-lobby .idn-wh { flex-basis: 100%; margin-bottom: 0.1rem; }
.idn-chip { display: inline-flex; align-items: center; font-size: 0.76rem; padding: 0.18rem 0.5rem 0.18rem 0.25rem; border-radius: 999px; border: 1px solid var(--border, #26262a); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idn-chip.mate { border-color: #4f8cff66; } .idn-chip.opp { border-color: #ff9a3c66; }
.idn-chip small { color: var(--text3, #9ca3af); margin-left: 0.3rem; }
.idn-chip .idn-badge { width: 1.15rem; height: 1.15rem; font-size: 0.5rem; vertical-align: 0; }
.idn-foot { font-size: 0.7rem; color: var(--text3, #9ca3af); margin: 0.55rem 0 0; }
.idn-pcard .idn-line { margin: 0 0 0.6rem; }
.idn-mix { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--surface, #1c1c1f); }
.idn-mix i { display: block; background: var(--c); font: 600 0.66rem/22px var(--mono, monospace); color: #0b0b0c; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.idn-mix i + i { border-left: 1px solid var(--bg2, #111113); }
.idn-key { display: flex; flex-wrap: wrap; gap: 0.25rem 0.8rem; font-size: 0.74rem; color: var(--text2, #a6a6ad); margin: 0.45rem 0 0.6rem; }
.idn-key b { font-family: var(--mono, monospace); font-weight: 600; color: var(--text, #f2f2f0); }
.idn-key .idn-badge { width: 1.1rem; height: 1.1rem; font-size: 0.48rem; margin-right: 0.25rem; vertical-align: -0.25rem; }
.idn-recent { margin-bottom: 0.7rem; }
.idn-strip { display: flex; gap: 3px; }
.idn-strip i { flex: 1; max-width: 34px; height: 12px; border-radius: 3px; background: var(--c); }
.idn-cons { display: flex; gap: 0.8rem; align-items: center; }
.idn-score { display: flex; align-items: baseline; gap: 0.1rem; }
.idn-score b { font: 700 2rem/1 var(--display, inherit); color: var(--accent, #E1FF3C); }
.idn-score small { font-size: 0.75rem; color: var(--text3, #9ca3af); }
.idn-cw { font-weight: 600; font-size: 0.9rem; }
.idn-cs { font-size: 0.76rem; color: var(--text2, #a6a6ad); line-height: 1.45; margin-top: 0.1rem; }
.idn-frow { display: grid; grid-template-columns: minmax(0, 1fr) auto 4.6rem; gap: 0.5rem; align-items: center; font-size: 0.78rem; padding: 0.22rem 0; border-top: 1px solid var(--border, #26262a); }
.idn-fv { font-family: var(--mono, monospace); font-size: 0.74rem; color: var(--text3, #9ca3af); white-space: nowrap; }
.idn-fv b { color: var(--text, #f2f2f0); font-weight: 600; }
.idn-fa { text-align: right; font-weight: 700; white-space: nowrap; }
.idn-fa small { font-weight: 500; font-size: 0.68rem; }
.idn-frow.up .idn-fa, .idn-good { color: #22c55e; }
.idn-frow.down .idn-fa, .idn-bad { color: #ef4444; }
.idn-frow.flat .idn-fa { color: var(--text3, #9ca3af); }
.idn-note { font-size: 0.76rem; color: var(--text3, #9ca3af); margin: 0.6rem 0 0; }
.idn-empty { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; font-size: 0.78rem; color: var(--text2, #a6a6ad); margin: 0.5rem 0 0.3rem; }
@media (max-width: 560px) {
  .idn-cols, .idn-pcols { grid-template-columns: minmax(0, 1fr); }
  .idn-fit { grid-template-columns: 5.6rem minmax(0, 1fr) 2.4rem; }
  .idn-frow { grid-template-columns: minmax(0, 1fr) auto; }
  .idn-fa { grid-column: 2; }
  .idn-fv { grid-column: 1 / -1; order: 3; }
}