/* Gameplay explanation, using the site's existing client palette. */
.relay-page { --max: 1280px; }
.relay-intro { padding: 52px 0 30px; max-width: 860px; }
.relay-intro h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); margin: 18px 0; }
.relay-intro > p:last-child { color: #e6eeff; margin-top: 18px; }
.relay-figure { margin: 0 0 44px; min-width: 0; }
.diagram-container { width: 100%; overflow-x: auto; background: #fff; border: 2px inset #c8c8c8; }
.diagram-container svg { display: block; width: 100%; min-width: 1280px; }
.diagram-container:focus-visible { outline: 2px solid #00aedc; outline-offset: 4px; }
.relay-figure figcaption { background: #efedde; color: #44516b; padding: 14px 18px; font-size: .85rem; }
.relay-figure figcaption a { color: #0042de; display: inline-block; text-decoration: underline; text-underline-offset: 3px; margin-left: 12px; }
.relay-copy { max-width: 880px; margin: 0 0 42px; }
.relay-copy h2 { font-size: clamp(1.6rem, 3vw, 2rem); margin: 0 0 18px; }
.relay-copy p { margin: 12px 0; color: #e6eeff; }
.relay-copy a:not(.btn) { color: #00aedc; text-decoration: underline; text-underline-offset: 3px; }
.packet-steps { padding-left: 28px; }
.packet-steps li { padding-left: 10px; margin: 24px 0; }
.packet-steps li::marker { color: #00aedc; font-weight: 700; }
.packet-steps h3 { font-size: 1.1rem; }
.relay-copy .note { color: #111; margin: 24px 0; }
.relay-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 28px 0; }
.relay-page .site-footer { align-items: center; }
@media (max-width: 680px) { .relay-intro { padding-top: 32px; } .relay-figure figcaption a { display: block; margin: 10px 0 0; } }
@media print { .relay-page { background: white; color: #122c4a; } .diagram-container { overflow-x: visible; } .diagram-container svg { min-width: 0; } .relay-intro p, .relay-copy p { color: #122c4a; } }