/* System guide pages (guide-<system>.html, Manager-97 #40791): one page per game system, each held (hold=<system>)
   until the system is open on the VPS. Reuses .page-head, .steps, .guide-facts and .panel; adds the facts strip, the
   reward cards and the tips list. */
.sys-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: var(--sp-2); }
.sys-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 720px; margin: var(--sp-6) 0 0;
  border-block: 1px solid rgba(226, 169, 59, .35); }
.sys-facts > div { position: relative; padding: var(--sp-4) var(--sp-3); }
.sys-facts > div + div::before { content: ""; position: absolute; inset-block: 22%; inset-inline-start: 0; width: 1px; background: rgba(226, 169, 59, .25); }
.sys-facts dt { color: var(--text-3); font-size: .8125rem; }
.sys-facts dd { margin: 4px 0 0; color: var(--copper-300); font: 600 1.0625rem/1.3 var(--font-body); font-variant-numeric: tabular-nums lining-nums; }

.sys-body { display: grid; gap: var(--sp-8); }
.sys-part { max-width: 1040px; }
.sys-part > .section-title { margin-bottom: var(--sp-5); }
.sys-lead { color: var(--text); font-size: 1.0625rem; max-width: 62ch; margin-bottom: var(--sp-2); }
.sys-steps { grid-auto-rows: auto; }
.sys-list { box-shadow: none; padding-top: 0; max-width: 72ch; }
.sys-list li { font-size: 1rem; }
.sys-cards { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) { .sys-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sys-card { padding: var(--sp-5); box-shadow: inset 0 2px 0 rgba(226, 169, 59, .6), inset 0 0 0 1px rgba(246, 238, 223, .1), 0 24px 48px -24px rgba(4, 7, 16, .9); }
.sys-card h3 { font-size: 1.125rem; margin-bottom: var(--sp-2); }
.sys-card p { color: var(--text-2); font-size: .9375rem; }
.sys-card p + p { margin-top: var(--sp-2); }
.sys-note { margin-top: var(--sp-4); }
.sys-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--sp-3); }
.sys-tips { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.sys-tips li { padding: var(--sp-4) var(--sp-5); color: var(--text-2); }
.sys-tips b { color: var(--text); font-weight: 600; }
.sys-body > *, .sys-cards > * { min-width: 0; }
:lang(ar) .sys-facts dd { letter-spacing: 0; }
@media (max-width: 599px) {
  .sys-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys-facts > div:nth-child(3)::before { display: none; }
  .sys-facts > div:nth-child(n+3) { border-top: 1px solid rgba(226, 169, 59, .15); }
  .sys-body { gap: var(--sp-7); }
  .sys-steps li { gap: var(--sp-4); padding: var(--sp-4); }
}