/* ==========================================================================
   Royals & Rogues — Materials & finishes: the quiet-enamel language
   Broad color fields, fine metal lines, selective polish, light only where
   it clarifies action. Four principles from the site:
   1 Cloisonné structure — gold cloisons organize and preserve legibility
   2 Champlevé depth — recessed dark metal gives weight without facets
   3 Quiet light — ONE meaningful glow, restrained edges, smooth faces
   4 Software separation — art never carries type; copy arrives on demand
   ========================================================================== */

/* Enamel surface — panels, cards, capsules. Opaque ink, double gold rim. */
.rr-enamel-surface { background: var(--surface); border: 1px solid rgba(232,178,74,0.28); box-shadow: 0 0 0 1.5px var(--rr-void), 0 0 0 2.5px rgba(232,178,74,0.30), 0 18px 48px rgba(0,0,0,0.55); }

/* Enamel medallion — circular tokens, statuses, monograms.
   Set the hue per object: style="--hue: var(--rr-emerald)". The gold rim
   means REAL — a live registered artifact (same grammar as Kiduna). */
.rr-enamel { --hue: var(--rr-emerald); border-radius: 50%; display: grid; place-items: center; color: color-mix(in srgb, var(--hue) 55%, var(--rr-cream)); background: color-mix(in srgb, var(--hue) 24%, #081310); border: 1.5px solid color-mix(in srgb, var(--hue) 58%, var(--rr-void)); box-shadow: 0 0 0 2px var(--rr-void), 0 0 0 3.5px rgba(232,178,74,0.8), 0 0 0 5px var(--rr-void), 0 0 18px color-mix(in srgb, var(--hue) 24%, transparent); }
.rr-enamel--sm { border-width: 1px; box-shadow: 0 0 0 1px var(--rr-void), 0 0 0 2px rgba(232,178,74,0.7), 0 0 8px color-mix(in srgb, var(--hue) 24%, transparent); }
.rr-enamel--nascent { border-style: dashed; box-shadow: 0 0 0 2px var(--rr-void), 0 0 14px color-mix(in srgb, var(--hue) 18%, transparent); }

/* Champlevé recess — wells, slots, table felt. Content sits BELOW the metal. */
.rr-champleve { background: var(--bg-deep); border: 1px solid rgba(232,178,74,0.18); border-radius: var(--radius-md); box-shadow: inset 0 2px 10px rgba(1, 6, 5, 0.75), inset 0 0 0 1px rgba(3, 6, 5, 0.6); }

/* Gold cloison rule — the fine metal line that divides fields */
.rr-rule { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--hairline) 18%, var(--hairline) 82%, transparent); }
.rr-rule--solid { background: var(--hairline); }

/* Ember text — molten garnet for the wordmark's "& Rogues". Fire under metal. */
.rr-text-ember { background: linear-gradient(178deg, #ffb199 0%, #ff7a4d 22%, #e8503c 46%, var(--rr-garnet) 72%, #5e1a1e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Wordmark — the provided vector mark (assets/wordmark.svg): cream "Royals"
   over gold "& Rogues". Use the SVG exactly as given — never retype it —
   and always set it over the molten-garnet ground. */
.rr-molten-ground { background: radial-gradient(ellipse 130% 90% at 50% 112%, #e8503c 0%, var(--rr-garnet) 34%, #5e1a1e 66%, #240a0c 100%); }
.rr-wordmark-mark { display: block; width: 100%; height: auto; }
/* Legacy text fallback (contexts where the SVG cannot load) */
.rr-wordmark { font-family: var(--font-wordmark); font-weight: 400; line-height: 0.98; letter-spacing: -0.01em; }
.rr-wordmark .rr-wordmark-royals { display: block; color: var(--rr-cream); }
.rr-wordmark .rr-wordmark-rogues { display: block; color: var(--rr-gold); }
.rr-wordmark--inline .rr-wordmark-royals, .rr-wordmark--inline .rr-wordmark-rogues { display: inline; }

/* Gilded text — engraved-gold display headlines. Sparingly. */
.rr-text-gilded { background: linear-gradient(175deg, var(--rr-bright) 12%, var(--rr-gold) 55%, var(--rr-gold-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Quiet light — ONE radial glow behind a focal artifact. Never as a fill,
   never two per composition. */
.rr-glow { position: relative; isolation: isolate; }
.rr-glow::before { content: ""; position: absolute; inset: -60%; z-index: -1; background: radial-gradient(closest-side, rgba(232,178,74,0.30), rgba(232,178,74,0) 72%); pointer-events: none; }
.rr-glow--emerald::before { background: radial-gradient(closest-side, rgba(21,146,113,0.38), rgba(21,146,113,0) 72%); }

/* Table ground — the felt: deep green vignette for full-bleed sections */
.rr-table-ground { background: radial-gradient(ellipse 120% 90% at 50% 30%, #0a2a21 0%, var(--rr-ink) 58%, var(--rr-void) 100%); }

/* Motion — quiet: fades and small settles. No bounces, no spins. */
:root { --motion-quick: 160ms cubic-bezier(0.3, 0, 0.2, 1); /* @kind other */ --motion-settle: 420ms cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
