/*! © 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 */

.tp-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0.8rem; align-items: center; margin-bottom: 0.6rem; }
.tp-fig { margin: 0; }
.tp-fig figcaption { font-size: 0.72rem; color: var(--text3, #9ca3af); margin-top: 0.2rem; }
.tp-net { width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.tp-node circle { fill: var(--surface, #1c1c1f); stroke: #4f8cff; stroke-width: 2; }
.tp-node.t1 circle { stroke: #ff9a3c; }
.tp-node.me circle { stroke: var(--accent, #E1FF3C); stroke-width: 2.5; }
.tp-ni { fill: var(--text, #f2f2f0); font: 600 11px var(--mono, monospace); text-anchor: middle; }
.tp-nn { fill: var(--text, #f2f2f0); font-size: 11.5px; font-weight: 600; text-anchor: middle; }
.tp-node.me .tp-nn { fill: var(--accent, #E1FF3C); }
.tp-ns { fill: var(--text3, #9ca3af); font-size: 10px; text-anchor: middle; }
.tp-lbg { fill: var(--bg2, #111113); stroke: var(--border2, #36363c); stroke-width: 1; }
.tp-ln { fill: var(--text, #f2f2f0); font: 600 10px var(--mono, monospace); text-anchor: middle; }
.tp-ls { fill: #22c55e; font-size: 10px; text-anchor: middle; }
.tp-edge:hover path { opacity: 1; }
.tp-tiles { grid-template-columns: 1fr 1fr; margin-bottom: 0; }
.tp-bars { margin: 0.2rem 0 0.7rem; }
.tp-bh { font-size: 0.72rem; color: var(--text3, #9ca3af); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.35rem; }
.tp-barrow { display: grid; grid-template-columns: 3.4rem 1fr; gap: 0.5rem; align-items: center; margin-bottom: 0.3rem; font-size: 0.76rem; color: var(--text2, #a6a6ad); }
.tp-bar { display: flex; height: 18px; border-radius: 5px; overflow: hidden; background: var(--surface, #1c1c1f); }
.tp-bar i { display: block; font-style: normal; font: 600 0.68rem/18px var(--mono, monospace); color: #0b0b0c; text-align: center; white-space: nowrap; overflow: hidden; }
.tp-bar i.c, .tp-key i.c { background: #ef4444; }
.tp-bar i.s, .tp-key i.s { background: #22c55e; }
.tp-bar i.a, .tp-key i.a { background: #60a5fa; }
.tp-bar i.f, .tp-key i.f { background: #4b5563; color: #e5e7eb; }
.tp-key { display: flex; flex-wrap: wrap; gap: 0.25rem 0.8rem; font-size: 0.7rem; color: var(--text3, #9ca3af); margin-top: 0.3rem; }
.tp-key i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 0.3rem; vertical-align: -1px; }
.tp-note { font-size: 0.74rem; color: var(--text3, #9ca3af); margin: 0 0 0.7rem; line-height: 1.45; }
.tp-table { margin-bottom: 0.8rem; }
.tp-table th:first-child { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
.tp-table th small { color: var(--text3, #9ca3af); font-size: 0.68rem; }
.tp-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 0.4rem; vertical-align: 1px; background: #4f8cff; }
.tp-t1 .tp-dot { background: #ff9a3c; }
.tp-mh { font-size: 0.72rem; color: var(--text3, #9ca3af); text-transform: uppercase; letter-spacing: 0.05em; margin: 0.2rem 0 0.35rem; }
.tp-mh small { text-transform: none; letter-spacing: 0; }
.tp-ms { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tp-m { font-size: 0.76rem; background: var(--surface, #1c1c1f); border: 1px solid var(--border2, #36363c); border-left: 3px solid #9ca3af; border-radius: 6px; padding: 0.25rem 0.6rem; color: var(--text2, #a6a6ad); }
.tp-m.shot { border-left-color: #f59e0b; }
.tp-m.goal { border-left-color: #ef4444; }
.tp-m b { font-family: var(--mono, monospace); font-weight: 500; color: var(--text, #f2f2f0); margin-right: 0.15rem; }
.tp-m[onclick] { cursor: pointer; }
.tp-m[onclick]:hover, .tp-m[onclick]:focus { border-color: #E1FF3C; outline: none; }
@media (max-width: 720px) {
  .tp-top { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .tp-table th, .tp-table td { padding: 0.3rem 0.3rem; font-size: 0.74rem; }
  .tp-table th:first-child { max-width: 7rem; }
  .tp-table .tp-hc { display: none; } 
  .tp-m { flex: 1 1 100%; }
  .tp-barrow { grid-template-columns: 2.8rem 1fr; }
}