/* Realms page: the home page four-kingdom glow (T7-14, Lane 7).
 * No colour is defined here. Each realm section also carries the home page's .p-albion / .p-northumbria /
 * .p-mercia / .p-wessex class, so --accent and --tint come from the one set in style.css.
 * Same look as the home panels: tint wash, inset + outer accent glow, pulsing glowing sigil, accent border on hover.
 */
.realm-section { --k: var(--accent, var(--dawn)); margin: 28px auto; border: 1px solid var(--line2); border-radius: 12px; isolation: isolate;
  box-shadow: inset 0 0 140px -34px var(--accent, transparent), 0 0 40px -18px var(--accent, transparent);
  transition: border-color .3s, box-shadow .4s; }
.realm-section::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--tint); opacity: .22; pointer-events: none; z-index: 0; transition: opacity .4s; }
.realm-section > :not(.ta-sky) { position: relative; z-index: 1; }
.realm-section:hover, .realm-section:focus-within { border-color: var(--accent); box-shadow: inset 0 0 160px -30px var(--accent, transparent), 0 0 54px -14px var(--accent, transparent); }
.realm-section:hover::after, .realm-section:focus-within::after { opacity: .34; }
.realm-section::before { left: 0; border-radius: 0 3px 3px 0; z-index: 2; }
.realm-header .realm-crest { background: rgba(8,14,21,.45); filter: drop-shadow(0 0 14px var(--accent)) drop-shadow(0 0 34px var(--accent)); }
.realm-header h2 { text-shadow: 0 0 28px color-mix(in srgb, var(--accent) 55%, transparent); }
.realm-sidebar { background: rgba(8,14,21,.55); border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); }
@media (prefers-reduced-motion: no-preference) {
  .realm-header .realm-crest { animation: realmPulse 3.4s ease-in-out infinite alternate; }
}
@keyframes realmPulse { from { opacity: .78; } to { opacity: 1; } }
@media (max-width: 860px) {
  .realm-section { margin: 18px 12px; padding: 48px 16px; box-shadow: inset 0 0 90px -30px var(--accent, transparent), 0 0 26px -16px var(--accent, transparent); }
  .realm-section::before { top: 48px; height: 64px; }
  .realm-header .realm-crest { filter: drop-shadow(0 0 10px var(--accent)) drop-shadow(0 0 22px var(--accent)); }
}