/* Crowdpit connection quality (public/net.js): a ping line in the "you" card of every game page, and a small warning
   over the bottom middle of the game screen while the ping is red (net.js sets its left/top from the canvas's box). */
.net-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--muted, #7f8ca3); }
.net-row .net-label { flex: none; font: 700 11px/1 "Rajdhani", system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.14em; }
.net-row .net-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.net-row .net-value::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--muted, #7f8ca3); vertical-align: 1px; }
.net-row .net-value[data-level="good"] { color: var(--text, #e6ecf5); }
.net-row .net-value[data-level="good"]::before { background: var(--accent, #35e0ff); box-shadow: 0 0 6px var(--accent, #35e0ff); }
.net-row .net-value[data-level="ok"] { color: var(--gold, #ffd166); }
.net-row .net-value[data-level="ok"]::before { background: var(--gold, #ffd166); }
.net-row .net-value[data-level="bad"], .net-row .net-value[data-level="stalled"] { color: var(--danger, #ff4d5e); }
.net-row .net-value[data-level="bad"]::before, .net-row .net-value[data-level="stalled"]::before { background: var(--danger, #ff4d5e); }
.net-row .net-value[data-level="stalled"]::before { animation: net-blink 0.8s steps(2, start) infinite; }
@keyframes net-blink { to { visibility: hidden; } }
#stage { position: relative; } /* fullscreen.css sets this too; repeated for pages built without it (the CrazyGames bundle) */
.net-warn { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); z-index: 5; display: flex; align-items: center; gap: 6px; padding: 4px 9px 4px 7px; border-radius: 999px;
  background: rgba(8,11,18,0.85); border: 1px solid rgba(255,77,94,0.5); color: var(--danger, #ff4d5e);
  font: 700 10px/1 "Rajdhani", system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.net-warn::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.net-warn[data-level="stalled"]::before { animation: net-blink 0.8s steps(2, start) infinite; }
.net-warn[hidden] { display: none; }