/* Partilhado pelo Grimório (index.html) e pelo Questski (quests/index.html):
   o switch entre os dois sites no topo e a transição suave ao passar de um para o outro. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
::view-transition-group(sitesw) { animation-duration: .28s; }

.sitesw {
  --sw-acc: #C8973A; --sw-on: #140E06;
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  padding: 3px; border-radius: 999px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  view-transition-name: sitesw;
}
.sitesw a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px;
  padding: 4px 12px 4px 9px; border-radius: 999px;
  color: inherit; text-decoration: none; white-space: nowrap;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .01em; line-height: 1.2; text-transform: none;
  opacity: .78; transition: background .2s, opacity .2s, color .2s, box-shadow .2s;
}
.sitesw a:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.sitesw a:focus-visible { outline: 2px solid var(--sw-acc); outline-offset: 2px; }
.sitesw a[aria-current="page"] { opacity: 1; background: var(--sw-acc); color: var(--sw-on); box-shadow: 0 1px 6px rgba(0,0,0,.25); }
.sitesw svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) { .sitesw a { padding: 4px 9px; } .sitesw a span { display: none; } }

html[data-ui="modern"] .sitesw { background: rgba(7,6,22,.55); border-color: rgba(167,139,250,.32); color: #E9E5FF; }
html[data-ui="modern"] .sitesw a[aria-current="page"] { background: linear-gradient(135deg,#8B5CF6,#EC4899); color: #fff; box-shadow: 0 0 14px rgba(139,92,246,.55); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }