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

.kp-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.8rem; }
.kp-tile { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius2, 12px); padding: 0.65rem 0.8rem; min-width: 0; }
.kp-tile span { display: block; font-size: 0.72rem; color: var(--text3, #9ca3af); }
.kp-tile b { display: block; font-family: var(--display); font-size: 1.45rem; line-height: 1.2; }
.kp-tile small { font-size: 0.72rem; color: var(--text3, #9ca3af); }
.kp-tile.good b { color: var(--green, #22c55e); }
.kp-tile.bad b { color: var(--red, #ef4444); }
.kp-tile.warn { border-color: rgba(255, 176, 32, 0.5); }
.kp-lead { color: var(--text2); font-size: 0.84rem; margin: 0 0 0.7rem; line-height: 1.45; }
.kp-lead b { color: var(--text); }
.kp-warn { color: var(--amber, #FFB020); }
.kp-tips { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; gap: 0.35rem; }
.kp-tips li { font-size: 0.84rem; color: var(--text2); border-left: 2px solid var(--amber, #FFB020); padding-left: 0.6rem; }
.kp-sub { font-size: 0.8rem; font-weight: 600; margin: 0.9rem 0 0.4rem; }
.kp-sub small { font-weight: 400; color: var(--text3, #9ca3af); margin-left: 0.3rem; }
.kp-shots { display: grid; gap: 0.35rem; }
.kp-shot { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.2fr) 44px; gap: 0.15rem 0.6rem; align-items: center; background: var(--bg2); border: 1px solid var(--border); border-left: 3px solid var(--text3, #9ca3af); border-radius: var(--radius, 8px); padding: 0.45rem 0.7rem; font-size: 0.82rem; }
.kp-shot.goal { border-left-color: var(--red, #ef4444); }
.kp-shot.saved { border-left-color: var(--green, #22c55e); }
.kp-shot.mine { background: rgba(225, 255, 60, 0.04); }
.kp-shot[onclick] { cursor: pointer; }
.kp-shot[onclick]:hover, .kp-shot[onclick]:focus-visible { border-color: var(--accent, #E1FF3C); outline: none; }
.kp-t { font-family: var(--mono, monospace); color: var(--accent, #E1FF3C); }
.kp-res { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-by { color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-xg { font-family: var(--mono, monospace); text-align: right; color: var(--text2); }
.kp-where { grid-column: 2 / -1; font-size: 0.76rem; color: var(--text3, #9ca3af); }
.kp-shot.mine .kp-where { color: var(--text2); }
.kp-scroll { overflow-x: auto; }
.kp-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.kp-table th, .kp-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.kp-table th:first-child { text-align: left; font-weight: 500; color: var(--text2); max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
.kp-table thead th { font-family: var(--mono, monospace); font-size: 0.68rem; color: var(--text3, #9ca3af); font-weight: 400; }
.kp-table td { font-family: var(--mono, monospace); }
.kp-table tr.t1 th:first-child { border-left: 2px solid var(--orange, #FF9A3C); } .kp-table tr.t0 th:first-child { border-left: 2px solid var(--blue, #4D9FFF); }
.kp-table tr.me th, .kp-table tr.me td { color: var(--accent, #E1FF3C); }
.kp-table td.good { color: var(--green, #22c55e); } .kp-table td.bad { color: var(--red, #ef4444); }
@media (max-width: 720px) { .kp-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) {
  .kp-shot { grid-template-columns: 44px minmax(0, 1fr) 40px; }
  .kp-by { grid-column: 2 / -1; grid-row: 2; }
  .kp-where { grid-row: 3; }
  .kp-tile b { font-size: 1.25rem; }
}
@media (max-width: 420px) {
  .kp-table { font-size: 0.74rem; }
  .kp-table th, .kp-table td { padding: 0.3rem 0.25rem; }
  .kp-table thead th { white-space: normal; vertical-align: bottom; }
  .kp-table th:first-child { max-width: 5.6rem; }
}