/* =========================================================================
   ONE BOOST — network.css  (+ the games section)
   Two sections that had no styles of their own: ping/bandwidth, and the
   supported-games block that replaced the bare marquee strip.

   ⚠️ Effect-safety (README): no rotate/scale on any box, no fixed layer,
   no px snapshots — the bars are flex ratios, so nothing can grow past
   its parent and pan the page sideways on a phone.
   ========================================================================= */

/* ══════════ ping & bandwidth ══════════ */

.net-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.net-card {
  background: linear-gradient(180deg, var(--surface), var(--bg-soft));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  transition: border-color .22s, box-shadow .28s;
}
.net-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); }

.net-card-wide { grid-column: 1 / -1; }

.net-card-honest {
  grid-column: 1 / -1;
  background: rgba(0, 0, 0, .22);
  border-style: dashed;
}

.net-head { display: flex; gap: 16px; align-items: flex-start; }

.net-ico {
  width: 46px; height: 46px; flex: none;
  border-radius: 14px; display: grid; place-items: center;
  color: var(--red-ink);
  background: color-mix(in srgb, var(--red) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
}
.net-ico svg { width: 23px; height: 23px; }

.net-head h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 19px; margin-bottom: 7px;
}
html[lang="ar"] .net-head h3 { font-family: var(--font-ar); }
.net-head p { color: var(--text-2); font-size: 15px; line-height: 1.65; }

/* ---- the before/after split bar ---- */
.net-bars {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 24px;
  padding: 22px 20px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.net-bar-row { display: flex; align-items: center; gap: 14px; }

.net-bar-lbl {
  flex: none; width: 40px;
  font-size: 13px; font-weight: 700;
  color: var(--text-2);
}
.net-bar-lbl-on { color: var(--red-ink); }

.net-bar {
  flex: 1; min-width: 0;
  display: flex;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;                 /* segments can never escape the track */
  border: 1px solid var(--line-2);
}

.net-seg {
  display: grid; place-items: center;
  min-width: 0;
  font-style: normal;
  transition: flex-grow .5s var(--ease);
}
.net-seg span {
  font-size: 12.5px; font-weight: 700;
  padding-inline: 6px;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}

.net-seg-dl   { background: var(--surface-3); color: var(--text-2); }
.net-seg-game { background: color-mix(in srgb, var(--red) 30%, var(--surface)); color: var(--text); }

.net-cap {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-2);
}

/* ══════════ supported games ══════════ */

.gm-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.gm-card {
  position: relative;
  background: linear-gradient(180deg, var(--surface), var(--bg-soft));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  transition: border-color .22s, box-shadow .28s;
}
.gm-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); }

.gm-badge {
  display: inline-block;
  font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
  padding: 4px 11px;
  border-radius: 999px;
  color: var(--red-ink);
  background: color-mix(in srgb, var(--red) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 32%, transparent);
  margin-bottom: 14px;
}
.gm-badge-alt {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--line-2);
}

.gm-card h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; margin-bottom: 18px;
}
html[lang="ar"] .gm-card h3 { font-family: var(--font-ar); }

.gm-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.gm-game {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, .2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.gm-game b {
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 700;
  color: var(--text);
  direction: ltr; text-align: start;
}
.gm-game span { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }

.gm-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px; color: var(--text-2); line-height: 1.6;
}

.gm-points { display: flex; flex-direction: column; gap: 14px; }

.gm-points li {
  position: relative;
  padding-inline-start: 24px;
  color: var(--text-2);
  font-size: 15px; line-height: 1.65;
}
.gm-points li b { color: var(--text); font-weight: 700; }
.gm-points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 6px;
  top: .66em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--red) 65%, transparent);
}

@media (max-width: 900px) {
  .net-grid { grid-template-columns: 1fr; }
  .gm-grid  { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .net-card, .gm-card { padding: 24px 20px; }
  .net-bars { padding: 18px 14px; }
  .net-bar { height: 36px; }
  .net-seg span { font-size: 11.5px; }
  .gm-list { grid-template-columns: 1fr; }
}