/* legend.css - the "legendary" layer (owner 2026-10-16: "نخليه اسطوري"). One gold ornament language taken from the owner's
   FunWorld logo, laid over every page: engraved gold corners on cards and panels, a gold rule with a diamond under section
   titles, a faint girih star field behind the page, slow light rays behind the hero logo, and a gold lift on hover.
   Everything here is decoration only: remove this file and the site still works and reads the same. */

:root {
  --gold-1: #FFE7A3;
  --gold-2: #F4C65C;
  --gold-3: #E2A93B;
  --gold-4: #9A6416;
  /* one engraved corner (a bracket with a small diamond), turned for the four corners */
  --corner-unused: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M1 22V1h21' fill='none' stroke='%23E2A93B' stroke-width='1.6'/%3E%3Cpath d='M5 15V5h10' fill='none' stroke='%23F4C65C' stroke-opacity='.55' stroke-width='1'/%3E%3Cpath d='M1 1l5 0 0 5z' fill='%23F4C65C'/%3E%3Crect x='19.5' y='-1.2' width='4' height='4' transform='rotate(45 21.5 0.8)' fill='%23F4C65C'/%3E%3Crect x='-1.2' y='19.5' width='4' height='4' transform='rotate(45 0.8 21.5)' fill='%23F4C65C'/%3E%3C/svg%3E");
}

/* ---------- the page: a faint eight-point star field and a deep vignette ---------- */
body {
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(43, 76, 160, .18), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23E2A93B' stroke-opacity='.042' stroke-width='1'%3E%3Crect x='31' y='31' width='34' height='34'/%3E%3Cpath d='M48 24L72 48L48 72L24 48Z'/%3E%3Cpath d='M48 24V0M48 72V96M24 48H0M72 48H96'/%3E%3Cpath d='M31 31L0 0M65 31L96 0M31 65L0 96M65 65L96 96'/%3E%3Ccircle cx='48' cy='48' r='6'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: scroll, scroll;
}

/* ---------- engraved gold corners on every card and panel ---------- */
/* real four-corner frame: four small spans would add markup, so the frame is one SVG that scales its corners only */
.panel, .guide-card, .comm, .dl-steps li, .art-step, .tl-card {
  background-image: none;
  clip-path: none;
  border: 1px solid rgba(226, 169, 59, .16);
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none'%3E%3Cpath d='M1 26V1h25M64 1h25v25M89 64v25H64M26 89H1V64' stroke='%23E2A93B' stroke-width='2'/%3E%3Cpath d='M6 18V6h12M72 6h12v12M84 72v12H72M18 84H6V72' stroke='%23F4C65C' stroke-opacity='.5'/%3E%3Cpath d='M1 1h6v6zM89 1h-6v6zM89 89h-6v-6zM1 89h6v-6z' fill='%23F4C65C'/%3E%3Cpath d='M26 1h38M89 26v38M64 89H26M1 64V26' stroke='%23E2A93B' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E") 30 / 30px / 0 stretch;
  transition: translate var(--t-base, .25s) var(--ease, ease), box-shadow var(--t-base, .25s), filter var(--t-base, .25s);
}
/* cards that are links or tabs-of-content lift and glow gold when pointed at */
@media (hover: hover) {
  .guide-card:hover, a.comm:hover, .art-step:hover, .dl-steps li:hover {
    box-shadow: 0 18px 40px -18px rgba(4, 7, 16, .9), 0 0 0 1px rgba(244, 198, 92, .35), 0 0 28px -6px rgba(226, 169, 59, .35);
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .guide-card:hover, a.comm:hover, .art-step:hover, .dl-steps li:hover { translate: 0 -4px; }
}

/* ---------- section titles: a gold rule with a diamond in the middle ---------- */
.section-title, .page-title { position: relative; }
.section .section-title::after, .page-head .page-title::after {
  content: ""; display: block; width: 168px; height: 12px; margin-top: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='12' viewBox='0 0 168 12'%3E%3Cpath d='M0 6h70M98 6h70' stroke='%23E2A93B' stroke-width='1.4'/%3E%3Cpath d='M58 6h12M98 6h12' stroke='%23FFE7A3' stroke-width='2'/%3E%3Crect x='78' y='0' width='12' height='12' transform='rotate(45 84 6)' fill='none' stroke='%23F4C65C' stroke-width='1.4'/%3E%3Crect x='81' y='3' width='6' height='6' transform='rotate(45 84 6)' fill='%23F4C65C'/%3E%3C/svg%3E") no-repeat;
}
.download .section-title::after, .section-title.is-center::after { margin-inline: auto; }
/* the news head and the callings head put the title beside tabs: keep their rule short */
.news-head .section-title::after, .callings-head .section-title::after { width: 120px; background-size: 168px 12px; background-position: left center; }
[dir="rtl"] .news-head .section-title::after, [dir="rtl"] .callings-head .section-title::after { background-position: right center; }

/* ---------- sections meet on a thin gold seam ---------- */
.section + .section { box-shadow: inset 0 1px 0 rgba(226, 169, 59, .08); }

/* ---------- tabs: the selected one gets a gold underline with a diamond ---------- */
.tab[aria-selected="true"]::after { background: linear-gradient(90deg, transparent, var(--gold-3) 20%, var(--gold-1) 50%, var(--gold-3) 80%, transparent); height: 2px; }

/* ---------- the medals get a slow gold sheen when their card is pointed at ---------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .guide-card:hover .medal, .comm:hover .medal, .dl-steps li:hover .medal { box-shadow: 0 0 0 2px #3A2408, 0 0 0 3px rgba(255, 210, 120, .9), 0 0 18px 3px rgba(226, 169, 59, .45); }
}

/* ---------- spotlight: a gold light follows the pointer across cards and panels (app.js sets --mx / --my) ---------- */
@media (hover: hover) {
  .panel, .guide-card, .comm, .dl-steps li, .art-step, .tl-card, .gate, .show-stage, .news-list a {
    background-image: radial-gradient(360px circle at var(--mx, -999px) var(--my, -999px), rgba(244, 198, 92, .10), transparent 62%);
  }
  .panel:hover, .guide-card:hover, .dl-steps li:hover, .art-step:hover, .tl-card:hover {
    border-color: rgba(244, 198, 92, .38);
  }
}