/* Tutorial-only styles, sharing the app's existing palette and typography. */
.rg-dialog .rg-guide { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.rg-dialog .rg-guide[hidden] { display: none; }
.rg-dialog .rg-block { min-width: 0; padding: 0; }
.rg-dialog .rg-block + .rg-block { padding-top: 18px; border-top: 1px solid var(--ui-line); }
.rg-dialog .rg-block-title { margin: 0; font-size: 15px; line-height: 1.6; font-weight: 650; }
.rg-dialog .rg-body { margin: 7px 0 0; font-size: 13px; line-height: 1.85; color: var(--ui-muted); overflow-wrap: anywhere; }
.rg-dialog .rg-intro { padding: 14px 16px; background: var(--ui-surface-soft); border-radius: 16px; }
.rg-dialog .rg-intro + .rg-block { border-top: 0; padding-top: 0; }
.rg-dialog .rg-piece-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
.rg-dialog .rg-piece-option { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 68px; padding: 9px 3px; border: 1px solid var(--ui-line); border-radius: 13px; background: var(--ui-surface); color: var(--ui-ink); cursor: pointer; touch-action: manipulation; transition: background 140ms ease, color 140ms ease, border-color 140ms ease; }
.rg-dialog .rg-piece-option[aria-pressed='true'] { color: white; background: var(--ui-ink); border-color: var(--ui-ink); box-shadow: 0 4px 12px rgb(23 59 50 / 12%); }
.rg-dialog .rg-piece-option:focus-visible { outline: 3px solid var(--ui-gold); outline-offset: 3px; }
.rg-dialog .rg-piece-glyph { font-family: var(--ui-serif); font-size: 25px; line-height: 1.05; }
.rg-dialog .rg-piece-name { font-family: var(--ui-font); font-size: 10px; line-height: 1.3; white-space: nowrap; }
.rg-dialog .rg-piece-content { min-width: 0; margin-top: 16px; }
.rg-dialog .rg-piece-title { margin: 0; font-size: 14px; font-weight: 650; line-height: 1.6; }
.rg-dialog .rg-illustration { width: min(260px, 100%); margin: 14px auto 0; }
.rg-dialog .rg-piece-diagram { display: block; width: 100%; height: auto; overflow: visible; }
.rg-dialog .rg-demo-note { margin: 10px 0 0; font-size: 12px; line-height: 1.75; text-align: center; color: var(--ui-muted); }
.rg-dialog .rg-board-ground { fill: #f1e6cf; stroke: #dac299; stroke-width: 1; }
.rg-dialog .rg-palace { fill: #dfd6b7; stroke: none; }
.rg-dialog .rg-board-grid { fill: none; stroke: #b69c71; stroke-width: .8; }
.rg-dialog .rg-river-text { fill: #9a8058; font-size: 10px; letter-spacing: 2px; font-family: var(--ui-serif); }
.rg-dialog .rg-move-route { fill: none; stroke: var(--ui-accent); stroke-opacity: .55; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rg-dialog .rg-capture-route { fill: none; stroke: var(--ui-danger); stroke-width: 2.5; stroke-dasharray: 5 4; }
.rg-dialog .rg-move-target { fill: #edf4e9; stroke: var(--ui-accent); stroke-width: 2.5; }
.rg-dialog .rg-blocked-target { fill: none; stroke: var(--ui-danger); stroke-width: 3; stroke-linecap: round; }
.rg-dialog .rg-demo-token circle { fill: #fff7e5; stroke: #bd9c66; stroke-width: 2; }
.rg-dialog .rg-demo-token text { fill: var(--ui-danger); font-size: 17px; font-family: var(--ui-serif); font-weight: 700; }
.rg-dialog .rg-demo-token.rg-enemy text { fill: var(--ui-ink); }
.rg-dialog .rg-demo-token.rg-screen circle { fill: #e1e9de; stroke: #6b8d7d; }
.rg-dialog .rg-demo-token.rg-screen text { fill: #416a58; }
.rg-dialog .rg-demo-token.rg-capture circle { stroke: var(--ui-danger); stroke-width: 3; }
.rg-dialog .rg-check-rule { border-left: 3px solid var(--ui-danger); padding-left: 13px; }
.rg-dialog .rg-five-board { display: block; width: min(230px, 100%); height: auto; margin: 15px auto 0; }
.rg-dialog .rg-five-line { fill: none; stroke: var(--ui-gold); stroke-width: 13; stroke-linecap: round; opacity: .58; }
.rg-dialog .rg-five-black { fill: var(--ui-ink); stroke: #102e26; stroke-width: 1; }
.rg-dialog .rg-five-white { fill: #fffdf7; stroke: #b5ab92; stroke-width: 1.2; }
@media (min-width: 460px) {
  .rg-dialog .rg-piece-picker { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .rg-dialog .rg-piece-option { min-height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .rg-dialog .rg-piece-option { transition: none; }
}
/* The brand serif is a small subset and omits 中/国/象/自/由/弈.
   Use one complete UI family so standard and free titles never mix glyph styles. */
.rg-dialog > .dialog-heading h2 { min-width: 0; font-family: var(--ui-font); font-weight: 600; text-wrap: balance; }

/* A quick action sequence, then one focused example at a time. */
.rg-dialog .rg-guide { gap: 16px; }
.rg-dialog .rg-body { font-size: 13px; line-height: 1.7; }
.rg-dialog .rg-intro { padding: 13px 14px; border-radius: 14px; }
.rg-dialog .rg-block-title { font-size: 14px; line-height: 1.55; }
.rg-dialog .rg-block + .rg-block { padding-top: 16px; }
.rg-dialog .rg-quickstart { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; padding: 0; }
.rg-dialog .rg-quickstep { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 3px; text-align: center; }
.rg-dialog .rg-step-number { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ui-accent); color: var(--ui-on-accent,#fff); font: 600 11px/1 var(--ui-font); }
.rg-dialog .rg-quickstep strong { font-size: 11px; font-weight: 550; }
.rg-dialog .rg-piece-picker { display: flex; gap: 6px; overflow-x: auto; padding: 2px 1px 6px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.rg-dialog .rg-piece-option { flex: 1 0 48px; min-height: 64px; padding: 8px 3px; border-color: transparent; background: var(--ui-surface-soft); scroll-snap-align: start; }
.rg-dialog .rg-piece-option[aria-pressed='true'] { color: var(--ui-on-accent,#fff); background: var(--ui-accent); box-shadow: none; }
.rg-dialog .rg-piece-glyph { display: block; width: 30px; height: 30px; }
.rg-dialog .rg-piece-name { font-size: 9px; }
.rg-dialog .rg-piece-content { margin-top: 12px; }
.rg-dialog .rg-piece-title { font-size: 14px; }
.rg-dialog .rg-illustration { width: min(260px,100%); border-radius: 14px; overflow: hidden; background: #f1e6cf; }
.rg-dialog .rg-piece-diagram { overflow: hidden; }
.rg-dialog .rg-demo-token { color: var(--ui-danger); }
.rg-dialog .rg-demo-token.rg-enemy { color: var(--ui-ink); }
.rg-dialog .rg-demo-token.rg-screen { color: #416a58; }
.rg-dialog .rg-demo-token circle { stroke-width: 1.3; }
.rg-dialog .rg-demo-note { font-size: 11px; line-height: 1.6; }
.rg-dialog .rg-check-rule { border-left-width: 2px; padding-left: 12px; }
@media (min-width: 460px) { .rg-dialog .rg-piece-option { flex-basis: 0; } }