/*
 * Royal Obsidian — skin.css
 * Private members' club: flat obsidian field, gold hairlines, serif display, fully-pill buttons, calm luxury.
 * Realizes TEMPLATE_META['royal'].skinSpec STRUCTURE (not a recolor). Tokens injected on the root by
 * tokens.css; here we consume var(--token) only and mix gold translucency via color-mix — no new brand colors.
 *
 * EVERY rule is scoped under [data-template="royal"] for tenant isolation — it can never touch another template.
 * Shell contracts already handled by base.css: outset focus rings, tabular money, reduced-motion gating.
 * Character notes: sections are divided by full-bleed GOLD HAIRLINE RULES + whitespace, not boxed panels;
 * artwork sits in a recessed well behind a thin gold keyline (framed-portrait feel); presses INSET, never bounce.
 */

/* ── Layout: centered reading column on a flat obsidian field with a barely-there gold vignette ── */
[data-template="royal"] {
  /* Faint top-anchored gold vignette so the field reads as lit velvet, not a slab. Kept <4% so it never
     competes with content and stays trust-quiet (near-flat, no heavy glow). */
  background-color: var(--bg-base);
  background-image: radial-gradient(
    120% 80% at 50% -10%,
    color-mix(in srgb, var(--accent) 6%, transparent) 0%,
    transparent 60%
  );
  background-attachment: fixed;
}

[data-template="royal"] .tpl-shell {
  max-width: 1180px;
  padding: 28px 20px 72px; /* wide, generous gutters per skinSpec */
}

/* Generous vertical rhythm — the club breathes. */
[data-template="royal"] .tpl-stack {
  gap: 20px;
}

/* Section titles become full-bleed GOLD HAIRLINE RULES with a small-caps serif label riding the line. */
[data-template="royal"] .tpl-section__title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
[data-template="royal"] .tpl-section__title::after {
  content: "";
  flex: 1;
  height: 1px;
  /* Hairline that fades out — a drawn gold rule, not a hard border. */
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--accent) 55%, transparent),
    transparent
  );
}

/* ── Nav: slim, transparent, CENTERED serif wordmark over a hairline gold rule ── */
[data-template="royal"] .tpl-nav {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* menu left · wordmark center · balance right */
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 16px 4px 18px;
}
/* The defining hairline gold rule beneath the bar. */
[data-template="royal"] .tpl-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--accent) 60%, transparent) 20%,
    color-mix(in srgb, var(--accent) 60%, transparent) 80%,
    transparent
  );
}
[data-template="royal"] .tpl-nav__brand {
  grid-column: 2;
  justify-self: center;
  font-weight: 600; /* Cormorant reads elegant at lighter weight than the sans default 800 */
  font-size: 24px;
  letter-spacing: 0.06em;
  color: var(--text-primary); /* obsidian-on-gold would clash; keep ivory, let gold rule speak */
}
[data-template="royal"] .tpl-nav__links {
  grid-column: 1;
  justify-self: start;
}
[data-template="royal"] .tpl-nav__links a,
[data-template="royal"] .tpl-nav__links > * {
  color: var(--text-secondary);
  transition: color var(--motion-speed) var(--motion-ease);
}
[data-template="royal"] .tpl-nav__links a:hover {
  color: var(--accent);
}
/* Balance pill: tabular figure carried on a quiet inset pill with a THIN GOLD UNDERLINE keyline. */
[data-template="royal"] .tpl-nav__balance {
  grid-column: 3;
  justify-self: end;
  background: color-mix(in srgb, var(--bg-inset) 80%, transparent);
  border: 1px solid var(--border);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--text-primary);
  font-weight: 600;
}

/* Mobile: wordmark stays centered, menu collapses to a hairline button, balance drops beneath if needed. */
@media (max-width: 560px) {
  [data-template="royal"] .tpl-nav__links {
    font-size: 12px;
    gap: 10px;
  }
  [data-template="royal"] .tpl-nav__balance {
    padding: 5px 10px;
  }
}

/* ── Hero: calm full-width overture — serif headline, one subline, single gold pill CTA, hairline frame ── */
[data-template="royal"] .tpl-hero {
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 72px 24px 76px; /* deep negative space */
  overflow: hidden;
}
/* Framed by hairline gold rules top and bottom (no boxed panel). */
[data-template="royal"] .tpl-hero::before,
[data-template="royal"] .tpl-hero::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--accent) 50%, transparent),
    transparent
  );
}
[data-template="royal"] .tpl-hero::before { top: 0; }
[data-template="royal"] .tpl-hero::after { bottom: 0; }

[data-template="royal"] .tpl-hero__title {
  font-weight: 600;
  font-size: clamp(38px, 8vw, 66px); /* large Cormorant statement */
  line-height: 1.04;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
}
[data-template="royal"] .tpl-hero__sub {
  max-width: 46ch;
  margin: 0 auto 30px;
  color: var(--text-muted);
  font-size: 15px;
}

/* ── Buttons: FULLY PILL. Primary solid gold w/ obsidian label; press insets & darkens — never bounces ── */
[data-template="royal"] .tpl-btn {
  border-radius: var(--radius-pill);
  padding: 0 26px; /* pills want horizontal breathing room */
  font-weight: 600;
  letter-spacing: 0.02em;
}
[data-template="royal"] .tpl-btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}
[data-template="royal"] .tpl-btn--primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px); /* barely-there rise, no scale */
}
[data-template="royal"] .tpl-btn--primary:active {
  /* Press DARKENS and INSETS — pressed into the felt. */
  background: color-mix(in srgb, var(--accent) 82%, #000);
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45);
}

/* Secondary: ghost PILL with a 1px gold hairline that fills to a faint gold wash on hover. */
[data-template="royal"] .tpl-btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
[data-template="royal"] .tpl-btn--secondary:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
[data-template="royal"] .tpl-btn--secondary:active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  transform: translateY(1px);
}

/* Tertiary: text button with an animated hairline underline that WIPES FROM LEFT on hover. */
[data-template="royal"] .tpl-btn--ghost {
  position: relative;
  background: transparent;
  color: var(--accent);
  padding: 0 8px;
}
[data-template="royal"] .tpl-btn--ghost::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-speed) var(--motion-ease);
}
[data-template="royal"] .tpl-btn--ghost:hover {
  background: transparent; /* override base bg-raised fill; luxury stays quiet */
}
[data-template="royal"] .tpl-btn--ghost:hover::after {
  transform: scaleX(1);
}
[data-template="royal"] .tpl-btn--ghost:active {
  transform: translateY(1px);
}

[data-template="royal"] .tpl-btn--danger:active {
  background: color-mix(in srgb, var(--danger) 85%, #000);
  transform: translateY(1px);
}

/* ── Cards: near-flat obsidian panels, 8px radius, hairline that WARMS TO GOLD on hover ── */
[data-template="royal"] .tpl-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md); /* 8px — restrained, not the lush 16px */
  box-shadow: none; /* flat at rest; shadow only on lift */
  padding: 22px;
  transition: border-color var(--motion-speed) var(--motion-ease),
    box-shadow var(--motion-speed) var(--motion-ease),
    transform var(--motion-speed) var(--motion-ease);
}
[data-template="royal"] .tpl-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}
[data-template="royal"] .tpl-card__title {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

/* ── Game grid: 2-up at 360px → 3-up → 4-up, wide gutters ── */
[data-template="royal"] .tpl-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (min-width: 620px) {
  [data-template="royal"] .tpl-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}
@media (min-width: 900px) {
  [data-template="royal"] .tpl-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

/* ── Tiles: framed-portrait — artwork in a RECESSED INSET WELL behind a thin gold keyline ── */
[data-template="royal"] .tpl-tile {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 10px 0; /* mat around the framed art */
}
[data-template="royal"] .tpl-tile:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  transform: translateY(-2px);
  box-shadow: var(--shadow-card); /* soft, not the loud pop */
}
[data-template="royal"] .tpl-tile__art {
  border-radius: var(--radius-sm);
  /* Recessed well: darker inset fill + thin gold keyline + inner shadow = framed portrait. */
  background: linear-gradient(160deg, var(--bg-inset), #000);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.55);
  color: color-mix(in srgb, var(--accent) 80%, var(--text-primary));
}
[data-template="royal"] .tpl-tile__bar {
  background: transparent; /* the mat, not a raised strip */
  border-top: 0;
  padding: 10px 4px 12px;
}
[data-template="royal"] .tpl-tile__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ── Inputs: recessed obsidian wells; focus warms the hairline to gold ── */
[data-template="royal"] .tpl-input {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: border-color var(--motion-speed) var(--motion-ease);
}
[data-template="royal"] .tpl-input:focus {
  border-color: var(--accent);
}
[data-template="royal"] .tpl-label {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}

/* ── Chips: quiet pills; active fills gold with obsidian label ── */
[data-template="royal"] .tpl-chip {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong));
  transition: color var(--motion-speed) var(--motion-ease),
    border-color var(--motion-speed) var(--motion-ease),
    background var(--motion-speed) var(--motion-ease);
}
[data-template="royal"] .tpl-chip:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}
[data-template="royal"] .tpl-chip--active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* ── Balance display: full serif elegance ── */
[data-template="royal"] .tpl-balance {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

/* ── Table: hairline rows, gold-tinted header labels; amounts stay tabular (base) ── */
[data-template="royal"] .tpl-table th {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
[data-template="royal"] .tpl-table td {
  border-bottom-color: var(--border);
}
[data-template="royal"] .tpl-table tr:hover td {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* ── Toast: near-flat with a hairline gold left keyline ── */
[data-template="royal"] .tpl-toast {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  box-shadow: var(--shadow-card);
}

/*
 * NOTE ON accent-2 (deep-green) CTAs: this skin adds no filled accent-2 button, so the shell contract
 * (accent-2 fills must use var(--on-accent-2) for label text) is already satisfied by components.css —
 * .tpl-badge--accent2 there uses color: var(--on-accent-2). Documented here so a future accent-2 CTA
 * added to this skin remembers to set color: var(--on-accent-2), never var(--on-accent).
 */