/* First-visit rules cards, shared by every Outmark game. Each page themes them with these tokens. */
.rc-card {
  --rc-text: currentColor;
  --rc-muted: #68645f;
  --rc-accent: #613ef0;
  --rc-on-accent: #fff;
  --rc-line: #ddd6c9;
  --rc-sq: #f3efe6;
  --rc-hl: #e6defe;
  --rc-x: #613ef0;
  --rc-o: #ef6455;
  display: grid; justify-items: center; gap: 6px; width: 100%; text-align: center;
}
.rc-kicker { margin: 0; color: var(--rc-accent); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rc-title { margin: 0; font-size: 28px; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.rc-figure { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 8px 0 0; max-width: 100%; }
.rc-figure svg { max-width: 100%; height: auto; }
.rc-caption { margin: 0; color: var(--rc-muted); font-size: 13px; }
.rc-steps { display: grid; gap: 11px; width: 100%; margin: 12px 0 4px; padding: 0; list-style: none; text-align: left; }
.rc-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.rc-num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--rc-accent); color: var(--rc-on-accent); font-size: 13px; font-weight: 800; line-height: 1; }
.rc-steps p { margin: 0; font-size: 14px; line-height: 1.4; }
.rc-steps b { display: block; color: var(--rc-text); font-size: 15.5px; line-height: 1.3; }
.rc-steps p span { color: var(--rc-muted); }
.rc-card:focus { outline: none; }
.rc-note { width: 100%; margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--rc-line); color: var(--rc-muted); font-size: 13px; line-height: 1.45; text-align: left; }

/* Mini boards. */
.rc-board { display: block; overflow: visible; }
.rc-sq { fill: var(--rc-sq); }
.rc-sq.hl { fill: var(--rc-hl); }
.rc-x { fill: none; stroke: var(--rc-x); stroke-width: 2.4; stroke-linecap: round; }
.rc-o { fill: none; stroke: var(--rc-o); stroke-width: 2.2; }
.rc-strike { fill: none; stroke: var(--rc-x); stroke-width: 2.6; stroke-linecap: round; opacity: .55; }
.rc-arrow { width: 12px; height: 12px; flex: none; fill: none; stroke: var(--rc-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Matricks trick legend: three columns, before above after. */
.rc-tricks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; margin: 4px 0 0; }
.rc-trick { display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; padding: 9px 6px 10px; border: 1px solid var(--rc-line); border-radius: 12px; }
.rc-trick b { color: var(--rc-accent); font-size: 14px; }
.rc-flip { display: grid; justify-items: center; gap: 4px; min-height: 76px; align-content: center; }
.rc-trick span { color: var(--rc-muted); font-size: 12px; line-height: 1.35; }

/* Fives queue: six live marks, the seventh pushes out the first. */
.rc-queue { overflow: visible; }
.rc-q circle { fill: var(--rc-sq); stroke: var(--rc-x); stroke-width: 2; }
.rc-q text { fill: var(--rc-text); font: 800 12px system-ui, sans-serif; text-anchor: middle; }
.rc-q.out circle { stroke: var(--rc-o); stroke-dasharray: 3 3; fill: transparent; }
.rc-q.out text { fill: var(--rc-o); }
.rc-q.new circle { fill: var(--rc-x); }
.rc-q.new text { fill: var(--rc-on-accent); }
.rc-q-cross { fill: none; stroke: var(--rc-o); stroke-width: 2; stroke-linecap: round; }
.rc-q-arrow { fill: none; stroke: var(--rc-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 360px) {
  .rc-title { font-size: 25px; }
  .rc-tricks { gap: 4px; }
  .rc-trick { padding: 8px 4px; }
  .rc-trick span { font-size: 11.5px; }
}

/* Stand-alone rules dialog (Fives builds its own; Drift and Matricks reuse their help dialogs). */
.rc-dialog { width: min(100% - 32px, 420px); max-height: calc(100% - 32px); overflow: auto; padding: 0; border: 2px solid #1a1a1a; border-radius: 22px; background: #fffaf0; color: #1a1a1a; }
.rc-dialog-body { position: relative; display: grid; gap: 12px; padding: 26px 22px 20px; }
.rc-dialog .rc-card { --rc-text: #1a1a1a; --rc-muted: #5f5a52; --rc-accent: #6547ff; --rc-line: #e3dacb; --rc-sq: #f4ecdd; --rc-hl: #e6defe; --rc-x: #6547ff; --rc-o: #ff5d4c; }
.rc-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.rc-cta { width: 100%; min-height: 52px; border: 2px solid #1a1a1a; border-radius: 16px; background: #1a1a1a; color: #fff; font: 800 17px system-ui, -apple-system, sans-serif; cursor: pointer; }
.rc-cta:active { transform: translateY(1px); }
.rc-dialog .rc-cta { position: sticky; bottom: 12px; box-shadow: 0 0 0 12px #fffaf0; }