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

.gh-top { display: flex; gap: 0.9rem; align-items: center; margin-bottom: 0.8rem; }
.gh-score { flex: 0 0 auto; display: flex; align-items: baseline; gap: 0.15rem; background: var(--bg2, #111113); border: 1px solid var(--border, #26262a); border-radius: var(--radius2, 10px); padding: 0.45rem 0.85rem; }
.gh-score b { font-family: var(--display, inherit); font-size: 2.6rem; line-height: 1; color: var(--accent, #E1FF3C); }
.gh-score span { font-size: 0.85rem; color: var(--text3, #9ca3af); }
.gh-score.up b { color: var(--green, #22c55e); }
.gh-score.down b { color: #ef4444; }
.gh-lead { min-width: 0; font-size: 0.82rem; line-height: 1.45; color: var(--text2, #a6a6ad); }
.gh-lead p { margin: 0; }
.gh-lead .gh-facts { margin-top: 0.3rem; font-size: 0.76rem; color: var(--text3, #9ca3af); }
.gh-lead b { color: var(--text, #f2f2f0); font-family: var(--mono, monospace); font-weight: 600; }
.gh-bars { margin-bottom: 0.7rem; }
.gh-bh { font-size: 0.7rem; color: var(--text3, #9ca3af); text-transform: uppercase; letter-spacing: 0.05em; margin: 0.45rem 0 0.3rem; }
.gh-row { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) 3.6rem; gap: 0.55rem; align-items: center; margin-bottom: 0.3rem; }
.gh-rl { min-width: 0; line-height: 1.15; }
.gh-rl b { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text, #f2f2f0); }
.gh-rl small { display: block; font-size: 0.66rem; color: var(--text3, #9ca3af); }
.gh-track { position: relative; height: 12px; border-radius: 6px; background: var(--surface, #1c1c1f); }
.gh-track i { display: block; height: 100%; border-radius: 6px; background: var(--accent, #E1FF3C); opacity: 0.85; }
.gh-track i.up { background: #22c55e; }
.gh-track i.down { background: #ef4444; }
.gh-track u { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: #e5e7eb; border-radius: 1px; }
.gh-rv { text-align: right; font: 600 0.9rem/1.1 var(--mono, monospace); color: var(--text, #f2f2f0); }
.gh-rv small { display: block; font: 400 0.64rem var(--mono, monospace); color: var(--text3, #9ca3af); }
.gh-rv.up { color: #22c55e; } .gh-rv.down { color: #ef4444; }
.gh-key { display: flex; gap: 0.25rem 0.9rem; font-size: 0.68rem; color: var(--text3, #9ca3af); margin-top: 0.35rem; }
.gh-key i { display: inline-block; vertical-align: -1px; margin-right: 0.3rem; }
.gh-key i.me { width: 14px; height: 9px; border-radius: 3px; background: var(--accent, #E1FF3C); }
.gh-key i.lb { width: 2px; height: 12px; background: #e5e7eb; vertical-align: -2px; }
.gh-tip { font-size: 0.78rem; line-height: 1.45; color: var(--text2, #a6a6ad); background: var(--bg2, #111113); border: 1px solid var(--border, #26262a); border-left: 3px solid var(--accent, #E1FF3C); border-radius: 6px; padding: 0.45rem 0.7rem; margin: 0 0 0.8rem; }
.gh-tip b { color: var(--text, #f2f2f0); }
.gh-mh { font-size: 0.7rem; color: var(--text3, #9ca3af); text-transform: uppercase; letter-spacing: 0.05em; margin: 0.2rem 0 0.4rem; }
.gh-mh small { text-transform: none; letter-spacing: 0; }
.gh-moms { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 0.5rem; }
.gh-mom { background: var(--bg2, #111113); border: 1px solid var(--border, #26262a); border-radius: 8px; padding: 0.45rem 0.45rem 0.5rem; font-size: 0.74rem; color: var(--text2, #a6a6ad); min-width: 0; }
.gh-mom.goal { border-color: rgba(239, 68, 68, 0.55); }
.gh-mom[onclick] { cursor: pointer; }
.gh-mom[onclick]:hover, .gh-mom[onclick]:focus { border-color: var(--accent, #E1FF3C); outline: none; }
.gh-mc { margin-top: 0.3rem; color: var(--text, #f2f2f0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-mc b { font-family: var(--mono, monospace); font-weight: 500; margin-right: 0.2rem; }
.gh-ms { font-size: 0.7rem; color: var(--text3, #9ca3af); }
.gh-mg { display: inline-block; margin-top: 0.25rem; font-size: 0.66rem; color: #fca5a5; background: rgba(239, 68, 68, 0.14); border-radius: 4px; padding: 0.05rem 0.35rem; }
.gh-pitch { display: block; width: 100%; max-width: 150px; height: auto; margin: 0 auto; }
.gh-field { fill: #0f1411; stroke: #2e3a32; stroke-width: 1; }
.gh-line { stroke: #26302a; stroke-width: 1; }
.gh-goal-them { fill: var(--accent, #E1FF3C); opacity: 0.7; }
.gh-goal-us { fill: #6b7280; }
.gh-arrow { stroke: #e5e7eb; stroke-width: 1.4; stroke-dasharray: 3 3; opacity: 0.85; }
.gh-head { fill: #e5e7eb; opacity: 0.85; }
.gh-ghost { fill: rgba(229, 231, 235, 0.16); stroke: #e5e7eb; stroke-width: 1.3; stroke-dasharray: 2.2 1.8; }
.gh-ball { fill: #f2f2f0; stroke: #0b0b0c; stroke-width: 0.8; }
.gh-me { fill: #4f8cff; stroke: var(--accent, #E1FF3C); stroke-width: 1.6; }
.gh-me.t1 { fill: #ff9a3c; }
.gh-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; font-size: 0.68rem; color: var(--text3, #9ca3af); margin-top: 0.45rem; }
.gh-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 0.3rem; vertical-align: -1px; }
.gh-legend .k-me { background: #4f8cff; box-shadow: 0 0 0 1.5px var(--accent, #E1FF3C); }
.gh-legend .k-me.t1 { background: #ff9a3c; }
.gh-legend .k-gh { border: 1.3px dashed #e5e7eb; background: rgba(229, 231, 235, 0.16); width: 8px; height: 8px; }
.gh-legend .k-ball { background: #f2f2f0; width: 7px; height: 7px; }
@media (max-width: 420px) {
  .gh-top { gap: 0.65rem; }
  .gh-score { padding: 0.4rem 0.6rem; }
  .gh-score b { font-size: 2.1rem; }
  .gh-row { grid-template-columns: minmax(0, 6.6rem) minmax(0, 1fr) 3.1rem; gap: 0.4rem; }
  .gh-rl small { font-size: 0.62rem; }
  .gh-moms { grid-template-columns: 1fr 1fr; gap: 0.4rem; }
}