/* The crest look: the whole site dressed like the Shenanigans logo - night-sky indigo, gold filigree, a magenta and
   teal crystal glowing in the middle. Loaded last, so it restyles the shared pieces (background, menu, cards, buttons,
   headings) without touching feature CSS. The logo itself (.crest) lives here too. */

/* ---------- sky ---------- */
body::before {
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 244, 214, .55), transparent 60%),
    radial-gradient(1px 1px at 68% 9%, rgba(255, 244, 214, .45), transparent 60%),
    radial-gradient(1.5px 1.5px at 83% 34%, rgba(143, 240, 228, .55), transparent 60%),
    radial-gradient(1px 1px at 41% 62%, rgba(255, 244, 214, .35), transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 81%, rgba(247, 168, 207, .45), transparent 60%),
    radial-gradient(1px 1px at 91% 76%, rgba(255, 244, 214, .4), transparent 60%),
    radial-gradient(1px 1px at 55% 28%, rgba(198, 181, 255, .5), transparent 60%),
    radial-gradient(1000px 520px at 82% -10%, rgba(79, 220, 207, .12), transparent 62%),
    radial-gradient(820px 460px at 4% 108%, rgba(226, 88, 154, .12), transparent 62%),
    radial-gradient(700px 380px at 45% 40%, rgba(110, 90, 200, .07), transparent 70%);
}
body::after { /* vignette, like the edges of the crest's map */
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0, 0, 0, .35) 100%);
}
[data-theme="light"] body::before {
  background:
    radial-gradient(1000px 520px at 82% -10%, rgba(13, 127, 118, .09), transparent 62%),
    radial-gradient(820px 460px at 4% 108%, rgba(168, 35, 95, .08), transparent 62%),
    radial-gradient(900px 600px at 50% 30%, rgba(255, 250, 235, .6), transparent 70%);
}
[data-theme="light"] body::after { background: radial-gradient(ellipse at 50% 40%, transparent 60%, rgba(120, 88, 30, .14) 100%); }

/* ---------- type ---------- */
h1, h2 { font-weight: 600; letter-spacing: .02em; }
.page-head h1 {
  font-family: var(--font-crest); font-weight: 700; letter-spacing: .01em; line-height: 1.08;
  background: linear-gradient(180deg, #f4fffd 0%, #a9efe7 46%, #5fc3cf 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(150, 110, 30, .9)) drop-shadow(0 0 18px rgba(79, 220, 207, .18));
}
[data-theme="light"] .page-head h1 { background: none; color: var(--text); filter: none; }
.page-head { position: relative; padding-bottom: var(--s-4); }
.page-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--filigree); }
.page-head::before { /* a little gem on the divider */
  content: ''; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg);
  background: linear-gradient(135deg, var(--rose), var(--accent)); box-shadow: 0 0 10px rgba(79, 220, 207, .5);
}
.page-head__kicker { color: var(--gold); display: inline-flex; align-items: center; gap: 8px; }
.page-head__kicker::before, .page-head__kicker::after { content: '✦'; font-size: .8em; opacity: .75; }
.topbar__title { font-family: var(--font-display); font-weight: 600; letter-spacing: .04em; }
.card__head h2, .card__head h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: .03em; }
.card__head > svg { color: var(--gold); }

/* ---------- menu ---------- */
.sidebar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 94%, transparent), color-mix(in srgb, var(--bg) 92%, transparent));
  border-right: 0;
}
.sidebar::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(230, 192, 106, .45) 15%, rgba(230, 192, 106, .45) 85%, transparent); }
.nav-section__label { color: var(--gold); opacity: .85; }
.nav-link:hover { background: color-mix(in srgb, var(--surface) 80%, transparent); }
.nav-link[aria-current="page"] { background: linear-gradient(90deg, var(--accent-soft), transparent 85%); color: var(--text); }
.nav-link[aria-current="page"] svg { color: var(--accent); opacity: 1; }
.nav-link[aria-current="page"]::before { /* a crystal instead of a pearl */
  border-radius: 1px; transform: rotate(45deg); width: 7px; height: 7px; margin-top: -3.5px; left: -5px;
  background: linear-gradient(135deg, #f7a8cf, #4fdccf); box-shadow: 0 0 10px rgba(79, 220, 207, .7);
}
.sidebar__foot { border-top: 0; position: relative; }
.sidebar__foot::before { content: ''; position: absolute; left: var(--s-5); right: var(--s-5); top: 0; height: 1px; background: var(--filigree); }
.topbar { border-bottom: 0; }
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--filigree); opacity: .7; }

/* the logo in the menu */
.sidebar__brand.has-crest { padding: var(--s-3) var(--s-3) var(--s-2); justify-content: center; }
.sidebar__brand.has-crest .crest { width: 100%; }

/* ---------- surfaces ---------- */
.card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--gold) 4%), var(--surface));
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(230, 192, 106, .14);
}
[data-theme="light"] .card { background: var(--surface); box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, .8); }
a.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2), 0 0 0 1px rgba(230, 192, 106, .12), 0 0 24px -8px rgba(79, 220, 207, .35); }
.card--pearl::after { height: 2px; opacity: .95; }

/* ---------- controls ---------- */
.btn--primary {
  --btn-bg: linear-gradient(180deg, #7ff3e7 0%, #3fcabd 55%, #2aa79d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1px rgba(230, 192, 106, .35), 0 6px 18px -8px rgba(79, 220, 207, .7);
}
[data-theme="light"] .btn--primary { --btn-bg: linear-gradient(180deg, #179d92, #0d7f76); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 1px rgba(140, 100, 16, .35); }
.btn:not(.btn--primary):not(.btn--ghost):not(.btn--discord):not(.btn--danger):hover { border-color: var(--gold); }
.chip[aria-pressed="true"] { background: linear-gradient(180deg, #f3d68e, #d8a948); color: #241a05; border-color: #b98c2e; }
button.chip[aria-pressed="true"]:hover { color: #241a05; border-color: #b98c2e; }
[data-theme="light"] .chip[aria-pressed="true"] { background: linear-gradient(180deg, #a87a1c, #8c6410); color: #fffaf0; border-color: #7a560c; }
[data-theme="light"] button.chip[aria-pressed="true"]:hover { color: #fffaf0; }
.tabs [role="tab"][aria-selected="true"]::after { background: linear-gradient(90deg, var(--rose), var(--accent)); }
::selection { background: var(--rose); color: #fff; }
* { scrollbar-color: rgba(230, 192, 106, .35) transparent; }

/* ---------- the crest (logo) ---------- */
.crest { position: relative; display: block; isolation: isolate; }
.crest__img { position: relative; width: 100%; height: auto; z-index: 1; }
.crest__glow { /* the crystal breathing behind the logo */
  position: absolute; left: 50%; top: 42%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 220, 207, .55), rgba(226, 88, 154, .25) 45%, transparent 70%); filter: blur(14px);
}
.crest__sheen { /* a light sweep across the crest now and then */
  position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: soft-light; overflow: hidden;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%) no-repeat;
  background-size: 250% 100%; background-position: 160% 0; opacity: 0;
}
.crest__sparks { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.crest__sparks i { position: absolute; bottom: 38%; width: 3px; height: 3px; border-radius: 50%; background: #c9fff8; box-shadow: 0 0 6px 1px rgba(79, 220, 207, .9); opacity: 0; }
.crest__sparks i:nth-child(1) { left: 44%; }
.crest__sparks i:nth-child(2) { left: 52%; background: #ffe6a8; box-shadow: 0 0 6px 1px rgba(230, 192, 106, .9); }
.crest__sparks i:nth-child(3) { left: 57%; }
.crest__sparks i:nth-child(4) { left: 47%; background: #ffc2e0; box-shadow: 0 0 6px 1px rgba(226, 88, 154, .9); }
.crest__sparks i:nth-child(5) { left: 54%; }
@media (prefers-reduced-motion: no-preference) {
  .crest__glow { animation: crest-breathe 5s ease-in-out infinite; }
  .crest__sheen { animation: crest-sheen 9s ease-in-out infinite 2s; }
  .crest__sparks i { animation: crest-spark 6s ease-out infinite; }
  .crest__sparks i:nth-child(2) { animation-delay: 1.2s; }
  .crest__sparks i:nth-child(3) { animation-delay: 2.5s; }
  .crest__sparks i:nth-child(4) { animation-delay: 3.7s; }
  .crest__sparks i:nth-child(5) { animation-delay: 4.8s; }
  a:hover .crest__glow { animation-duration: 1.6s; }
}
@keyframes crest-breathe { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.92); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes crest-sheen { 0%, 70% { opacity: 0; background-position: 160% 0; } 72% { opacity: 1; } 90% { opacity: 1; background-position: -60% 0; } 92%, 100% { opacity: 0; background-position: -60% 0; } }
@keyframes crest-spark { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; } 70% { opacity: .8; } 100% { opacity: 0; transform: translateY(-46px) scale(1); } }
[data-theme="light"] .crest__img { filter: drop-shadow(0 6px 14px rgba(40, 30, 80, .25)); }

/* welcome page */
.door__gem { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(230, 192, 106, .6), 0 0 14px rgba(79, 220, 207, .45); }
.door__brand { font-family: var(--font-crest); letter-spacing: .02em; }
.door__title { font-family: var(--font-crest); letter-spacing: 0; line-height: 1; }
.crest--xl .crest__glow { filter: blur(26px); }
.crest--xl .crest__sparks i { width: 4px; height: 4px; }
/* with a logo: one centred column, the crest on top like a banner */
.door--crest .door__hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; max-width: 900px; padding-top: 0; }
.door--crest .door__hero > div { display: flex; flex-direction: column; align-items: center; }
.door__crest { margin: 0 0 var(--s-2); width: min(760px, 100%); order: -1; }
.door--crest .door__eyebrow::after { content: ''; width: 28px; height: 1px; background: currentColor; }
.door--crest .door__tagline { margin-inline: auto; font-family: var(--font-display); font-size: var(--fs-xl); color: var(--text); }
.door--crest .door__cta, .door--crest .door__features { justify-content: center; }
.door--crest .door__teaser { margin-inline: auto; text-align: left; }

/* Admin -> Logo */
.logo-prev { display: grid; place-items: center; padding: var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--bg-2); min-height: 120px; }
.logo-prev img { max-width: min(100%, 520px); height: auto; }
.logo-pick { cursor: pointer; }