/* Eons Wrath v4 — visual repair, legibility and performance pass.
   Loaded after responsive.css so this file is the final authority for the repaired components. */

/* ---------- Performance-safe ambient life ---------- */
.world-glow{
  filter:none!important;
  opacity:.16;
  will-change:transform;
  background:radial-gradient(circle at 50% 50%,rgba(148,116,67,.24) 0,rgba(148,116,67,.08) 34%,transparent 70%)!important;
}
.glow-b{background:radial-gradient(circle at 50% 50%,rgba(74,112,79,.22) 0,rgba(74,112,79,.07) 35%,transparent 70%)!important}
.living-particle{box-shadow:none!important;will-change:transform,opacity}
.reveal{transition-duration:.48s}
.realm-codex,.magic-codex,.story-shell,.related{content-visibility:auto;contain-intrinsic-size:1px 680px}
.performance-lite .world-glow,.performance-lite .realm-page .identity-stage:before,.performance-lite .realm-page .identity-stage:after,.performance-lite .god-page .identity-stage:before{animation:none!important}
.performance-lite [data-tilt]{transform:none!important}

/* ---------- Missing-image treatment: never look broken ---------- */
.visual-shell.is-fallback{background:
  radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 34%),
  linear-gradient(145deg,color-mix(in srgb,var(--accent) 8%,#161610),#080908)}
.visual-shell.is-fallback:before{opacity:.75}
.visual-shell.is-fallback .fallback-sigil{width:min(38%,118px);opacity:.68;filter:none}
.fallback-monogram{font-size:clamp(30px,5vw,54px);opacity:.72;text-shadow:none}

/* ================================================================
   MAGIC INDEX — restore the portal as the hero interaction
   ================================================================ */
.section-magia .magic-entry-stage{
  min-height:min(930px,100vh);
  padding:64px 0 38px;
  grid-template-columns:minmax(245px,300px) minmax(0,1fr);
  gap:24px;
}
.magic-entry-title{align-self:center;z-index:8}
.magic-entry-title h1{font-size:clamp(62px,7.2vw,100px)}
.magic-entry-title p{font-size:18px;line-height:1.7;max-width:31ch}
.scroll-rune{bottom:12px;font-size:12px}
.magic-portal-wrap{min-height:790px;overflow:visible}
.magic-portal{
  --orbit-radius:305px;
  width:min(760px,72vw);
  aspect-ratio:1;
  animation:none!important;
  isolation:isolate;
  filter:none!important;
}
.magic-portal:before{
  inset:3%!important;
  border:0!important;
  background:conic-gradient(from -17deg,
    rgba(232,181,79,.65) 0deg 65deg,
    rgba(117,165,114,.65) 65deg 164deg,
    rgba(165,104,78,.58) 164deg 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  opacity:.52;
  z-index:0;
}
.magic-portal:after{
  inset:18%!important;
  border:1px dashed rgba(127,171,165,.22)!important;
  box-shadow:0 0 0 34px rgba(109,146,137,.018),0 0 0 92px rgba(196,156,88,.012);
  animation:portalSpin 46s linear infinite!important;
  z-index:0;
}
.portal-center{
  width:188px!important;
  height:188px;
  aspect-ratio:auto!important;
  overflow:visible;
  background:radial-gradient(circle at 50% 50%,#000 0 42%,#020708 55%,rgba(16,47,52,.56) 66%,transparent 72%)!important;
  box-shadow:inset 0 0 34px #000,0 0 0 1px rgba(91,157,172,.23),0 0 52px rgba(55,142,164,.16)!important;
}
.portal-center:before,.portal-center:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.portal-center:before{inset:-16px;border:1px solid rgba(81,156,174,.18);animation:portalPulseV4 4.6s ease-in-out infinite}
.portal-center:after{inset:21px;border:1px dashed rgba(142,215,229,.16);animation:portalSpin 24s linear infinite reverse}
.portal-center span{bottom:12px!important;font-size:11px!important;color:#9fc5c9!important;letter-spacing:.22em!important}
.blue-flame{
  position:relative;
  width:96px!important;
  height:132px!important;
  background:none!important;
  clip-path:none!important;
  filter:drop-shadow(0 0 14px rgba(75,178,214,.30)) drop-shadow(0 0 24px rgba(54,126,172,.16))!important;
  transform:translateY(-7px);
  animation:blueFlameSwayV6 2.6s ease-in-out infinite;
}
.blue-flame:before,.blue-flame:after,.blue-flame i{content:"";position:absolute;display:block;left:50%;bottom:0;transform-origin:50% 100%;mix-blend-mode:screen}
.blue-flame:before{
  width:54px;height:100px;margin-left:-27px;bottom:12px;
  background:linear-gradient(180deg,rgba(20,92,148,0) 0%,rgba(35,125,185,.22) 18%,rgba(62,184,226,.72) 56%,rgba(165,240,255,.95) 82%,rgba(242,255,255,.98) 100%);
  clip-path:polygon(50% 0%,60% 10%,68% 24%,73% 40%,75% 58%,71% 73%,63% 88%,50% 100%,37% 88%,29% 73%,25% 58%,27% 40%,32% 24%,40% 10%);
  animation:blueFlameOuterV6 1.28s ease-in-out infinite;
}
.blue-flame:after{
  width:28px;height:64px;margin-left:-14px;bottom:20px;
  background:linear-gradient(180deg,rgba(197,247,255,0) 0%,rgba(155,234,252,.45) 26%,rgba(197,250,255,.92) 72%,rgba(255,255,255,.98) 100%);
  clip-path:polygon(50% 0%,60% 12%,67% 30%,69% 47%,64% 67%,57% 84%,50% 100%,43% 84%,36% 67%,31% 47%,33% 30%,40% 12%);
  animation:blueFlameCoreV6 1.1s ease-in-out infinite;
}
.blue-flame i:nth-child(1){
  width:62px;height:18px;margin-left:-31px;bottom:12px;
  background:radial-gradient(ellipse at 50% 50%,rgba(177,240,255,.82) 0 16%,rgba(92,197,228,.42) 34%,rgba(38,104,145,.12) 65%,transparent 76%);
  border-radius:50%;filter:blur(1.6px);opacity:.9;
  animation:blueFlameBaseV6 1.35s ease-in-out infinite;
}
.blue-flame i:nth-child(2){
  width:20px;height:38px;margin-left:-10px;bottom:34px;
  background:linear-gradient(180deg,rgba(236,255,255,0) 0%,rgba(221,251,255,.64) 58%,rgba(255,255,255,.96) 100%);
  clip-path:polygon(50% 0%,66% 30%,62% 56%,54% 82%,50% 100%,46% 82%,38% 56%,34% 30%);
  opacity:.5;filter:blur(.45px);
  animation:blueFlameNeedleV6 1.55s ease-in-out infinite;
}
.blue-flame i:nth-child(3){
  width:88px;height:92px;margin-left:-44px;bottom:2px;
  background:radial-gradient(ellipse at 50% 72%,rgba(103,203,234,.18) 0 18%,rgba(67,148,195,.12) 35%,rgba(31,78,109,.05) 54%,transparent 74%);
  border-radius:50%;filter:blur(8px);opacity:.76;
  animation:blueFlameAuraV6 2s ease-in-out infinite;
}
@keyframes portalPulseV4{50%{transform:scale(1.055);opacity:.45}}
@keyframes blueFlameSwayV6{
  0%,100%{transform:translateY(-7px) rotate(-1.4deg)}
  35%{transform:translateY(-8px) rotate(1deg)}
  70%{transform:translateY(-6px) rotate(2.3deg)}
}
@keyframes blueFlameOuterV6{
  0%,100%{transform:translateX(0) scaleX(1) scaleY(1);opacity:.96}
  40%{transform:translateX(-1px) scaleX(.97) scaleY(1.03);opacity:1}
  65%{transform:translateX(1px) scaleX(1.03) scaleY(.97);opacity:.92}
}
@keyframes blueFlameCoreV6{
  0%,100%{transform:translateX(0) scaleX(1) scaleY(1);opacity:.95}
  45%{transform:translateX(-.5px) scaleX(.93) scaleY(1.06);opacity:1}
  72%{transform:translateX(.5px) scaleX(1.04) scaleY(.95);opacity:.88}
}
@keyframes blueFlameBaseV6{
  0%,100%{transform:translateX(0) scaleX(1);opacity:.84}
  50%{transform:translateX(1px) scaleX(1.08);opacity:1}
}
@keyframes blueFlameNeedleV6{
  0%,100%{transform:translateX(0) scaleY(1);opacity:.44}
  50%{transform:translateX(.5px) scaleY(1.14);opacity:.7}
}
@keyframes blueFlameAuraV6{
  0%,100%{transform:scale(1);opacity:.62}
  50%{transform:scale(1.06);opacity:.82}
}
.school-node{
  --node-size:132px;
  width:var(--node-size)!important;
  min-height:112px!important;
  padding:0 4px;
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(0px - var(--orbit-radius))) rotate(var(--na))!important;
  gap:4px;
  filter:none!important;
}
.school-node:before{
  content:"";position:absolute;top:0;left:50%;width:72px;height:72px;transform:translateX(-50%);border-radius:50%;z-index:-1;
  border:1px solid color-mix(in srgb,currentColor 42%,transparent);
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,currentColor 10%,transparent),rgba(7,8,7,.92) 68%);
  box-shadow:0 0 0 7px rgba(255,255,255,.008),0 10px 28px rgba(0,0,0,.28);
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.school-node img{width:48px!important;height:48px!important;margin:10px 0 8px!important;filter:none!important;z-index:1}
.school-node b{font-size:16px!important;line-height:1.05!important;text-shadow:0 1px 8px #000}
.school-node small{display:block!important;font-size:10.5px!important;line-height:1.18!important;max-width:126px;color:#aaa398!important;text-shadow:0 1px 7px #000}
.school-node:hover{transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-8px - var(--orbit-radius))) rotate(var(--na)) scale(1.06)!important;filter:none!important}
.school-node:hover:before{transform:translateX(-50%) scale(1.08);border-color:currentColor;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,currentColor 18%,transparent),rgba(7,8,7,.93) 68%)}
.school-node[data-group=sol]{color:#efbd5f!important}
.school-node[data-group=lua]{color:#93bd8e!important}
.school-node[data-group=arconte]{color:#c48f74!important}
.magic-doctrine{margin-top:0}
.foundation-runes a{min-height:100px;align-items:center}
.foundation-runes i{display:grid;place-items:center;width:52px;height:52px}
.foundation-runes i img{width:42px;height:42px;object-fit:contain}
.foundation-runes h3{font-size:25px}.foundation-runes p{font-size:15px;line-height:1.55}

/* ================================================================
   KINGDOM INDEX — compact atlas, 4×2 squares instead of huge strips
   ================================================================ */
.realms-hero{padding-bottom:34px}
.realm-road{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px!important;
  margin:0 0 84px!important;
}
.realm-landscape,.realm-landscape:nth-child(even){
  display:block!important;
  min-height:0!important;
  aspect-ratio:1/1;
  margin:0!important;
  position:relative;
  overflow:hidden;
  clip-path:none!important;
  border-radius:18px 4px 18px 4px!important;
  background:linear-gradient(155deg,color-mix(in srgb,var(--realm) 16%,#17150f),#080908 72%)!important;
  isolation:isolate;
  transform:none!important;
}
.realm-landscape:nth-child(even){border-radius:4px 18px 4px 18px!important}
.realm-landscape:before,.realm-landscape:after{content:"";position:absolute;pointer-events:none;z-index:1}
.realm-landscape:before{inset:0;background:linear-gradient(180deg,rgba(5,6,5,.08) 12%,rgba(5,6,5,.2) 42%,rgba(5,6,5,.92) 100%)}
.realm-landscape:after{inset:8px;border:1px solid color-mix(in srgb,var(--realm) 20%,transparent);border-radius:inherit;opacity:.7}
.realm-landscape:hover{transform:translateY(-4px)!important;box-shadow:0 18px 48px rgba(0,0,0,.34),0 0 24px color-mix(in srgb,var(--realm) 8%,transparent)!important}
.realm-image,.realm-landscape:nth-child(even) .realm-image{
  position:absolute!important;inset:0!important;order:initial!important;min-height:0!important;height:100%!important;width:100%;z-index:0;border:0!important;border-radius:0!important;
  opacity:.62;
}
.realm-image>img:not(.fallback-sigil){width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.realm-landscape:hover .realm-image>img:not(.fallback-sigil){transform:scale(1.035)}
.realm-image.visual-shell.is-fallback{opacity:1}
.realm-image.visual-shell.is-fallback .fallback-sigil{width:112px;opacity:.24}
.realm-copy{
  position:absolute!important;left:0;right:0;bottom:0;z-index:3;
  padding:20px 19px 18px!important;align-self:auto!important;
  min-width:0;
}
.realm-copy small{font-size:10px!important;line-height:1.35!important;letter-spacing:.11em!important;display:block;white-space:normal}
.realm-copy h2{font-size:clamp(30px,2.9vw,41px)!important;margin:4px 0 7px!important;line-height:.95}
.realm-copy .realm-tag{font-size:14.5px!important;line-height:1.34;color:#ece0c9!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.realm-copy p{display:none!important}
.realm-copy b{display:inline-block;margin-top:11px;font:760 10.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:color-mix(in srgb,var(--realm) 78%,#f2e7d1)}
.realm-symbol,.realm-landscape:nth-child(even) .realm-symbol{
  position:absolute!important;right:15px;top:15px;z-index:4;order:initial!important;width:58px;height:58px;display:grid!important;place-items:center!important;
  border:1px solid color-mix(in srgb,var(--realm) 35%,transparent);border-radius:50%;background:rgba(7,8,7,.7);backdrop-filter:blur(5px)
}
.realm-symbol img{width:37px!important;max-height:37px;object-fit:contain;opacity:.9!important;filter:none!important}
.realm-veloria{border-radius:30px 5px 18px 5px!important}.realm-veloria:after{border-radius:26px 3px 15px 3px}
.realm-elyndra{border-radius:5px 38px 5px 22px!important}.realm-elyndra:after{border-radius:3px 34px 3px 18px}
.realm-aureth{border-radius:50% 50% 14px 14px/23% 23% 14px 14px!important}.realm-aureth:after{border-radius:inherit}
.realm-ferram{border-radius:3px!important}.realm-ferram:after{border-radius:0;inset:10px 8px;border-left-width:3px}
.realm-sereva{border-radius:22px 4px 34px 4px!important}.realm-sereva:after{border-radius:18px 2px 30px 2px;transform:rotate(-.6deg)}
.realm-kharad{border-radius:4px 30px 4px 4px!important}.realm-kharad:after{border-radius:2px 26px 2px 2px}
.realm-nymara{border-radius:50% 50% 10px 10px/16% 16% 10px 10px!important}.realm-nymara:after{border-radius:inherit}
.realm-dolveth{border-radius:6px 6px 34px 6px!important}.realm-dolveth:after{border-radius:4px 4px 30px 4px}
.realm-veloria:before{background:linear-gradient(180deg,rgba(10,32,16,.08),rgba(6,11,7,.24) 45%,rgba(5,8,5,.94))}
.realm-elyndra:before{background:linear-gradient(180deg,rgba(18,42,23,.06),rgba(7,13,8,.25) 44%,rgba(5,8,5,.95))}
.realm-aureth:before{background:radial-gradient(circle at 50% 5%,rgba(228,177,74,.17),transparent 38%),linear-gradient(180deg,rgba(30,22,8,.05),rgba(8,8,6,.3) 50%,rgba(6,6,5,.95))}
.realm-ferram:before{background:linear-gradient(165deg,rgba(206,81,39,.1),transparent 40%),linear-gradient(180deg,transparent,rgba(11,7,5,.32) 48%,rgba(7,5,4,.96))}
.realm-sereva:before{background:linear-gradient(135deg,rgba(199,153,202,.12),transparent 34%),linear-gradient(180deg,transparent,rgba(10,7,11,.3) 48%,rgba(7,5,7,.96))}
.realm-kharad:before{background:repeating-linear-gradient(172deg,transparent 0 38px,rgba(189,90,100,.035) 39px 40px),linear-gradient(180deg,transparent,rgba(11,6,8,.36) 48%,rgba(7,5,6,.97))}
.realm-nymara:before{background:radial-gradient(circle at 50% 20%,rgba(101,161,165,.13),transparent 34%),linear-gradient(180deg,transparent,rgba(5,11,12,.32) 48%,rgba(4,7,8,.97))}
.realm-dolveth:before{background:linear-gradient(90deg,rgba(188,111,66,.05),transparent 50%,rgba(144,193,204,.08)),linear-gradient(180deg,transparent,rgba(8,11,12,.34) 50%,rgba(5,7,8,.97))}

/* ================================================================
   REALM DETAIL PAGES — preserve identity, remove clipping/breakage
   ================================================================ */
.realm-page .identity-stage{min-height:0!important;padding-top:28px;padding-bottom:34px}
.realm-page .identity-copy{min-width:0}.realm-page .identity-sub{line-height:1.55}
.realm-page .identity-side{min-width:0}
.fact-ribbon{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important}
.fact-ribbon>div{min-width:0;border-bottom:1px solid var(--line)}
.fact-ribbon b{font-size:15px!important;line-height:1.52!important;overflow-wrap:anywhere}
.realm-choice{font-size:18px!important;line-height:1.7;max-width:980px}
.realm-device{overflow:visible!important;clip-path:none!important;border-radius:18px 4px 18px 4px!important}
.realm-device header{align-items:center}.realm-device h2{font-size:30px!important}.realm-device header span{font-size:11px!important}
.realm-lens-controls button{font-size:12.5px!important;line-height:1.15!important;padding:10px 13px!important}
.realm-lens-text{font-size:17px;line-height:1.7;min-height:0!important}
.realm-page .codex-switcher{grid-template-columns:220px minmax(0,1fr)!important;gap:26px!important}
.realm-page .switch-tabs{min-width:0}
.realm-page .switch-tab{font-size:14px!important;line-height:1.35!important;padding:13px 14px!important}
.realm-page .switch-panels{min-width:0}
.realm-page .switch-panel{
  clip-path:none!important;
  overflow:visible!important;
  min-width:0;
  min-height:0!important;
  padding:30px clamp(24px,4vw,48px)!important;
  border:1px solid color-mix(in srgb,var(--accent) 18%,transparent)!important;
  border-top:2px solid color-mix(in srgb,var(--accent) 48%,transparent)!important;
  border-radius:18px 4px 18px 4px!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 7%,#11110e),rgba(9,10,8,.92) 72%)!important;
}
.realm-page .switch-panel:after{right:12px;top:12px;width:74px;height:74px;opacity:.35}
.realm-page .reading-copy{font-size:18px!important;line-height:1.78!important;max-width:78ch!important;overflow-wrap:anywhere}
.realm-page .reading-copy h3,.realm-page .deep-read h3{font-size:clamp(26px,3vw,34px)!important;line-height:1.15}
.realm-page .deep-read>div{font-size:17.5px;line-height:1.78;max-width:78ch}
.realm-page .deep-read summary{font-size:12px!important;padding:10px 14px!important}
.realm-page details[open] > div{animation:deepRevealV4 .25s ease-out}
@keyframes deepRevealV4{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* safe but distinctive content frames */
.realm-garden .switch-panel{border-radius:36px 5px 28px 5px!important;background:radial-gradient(circle at 92% 10%,rgba(131,168,115,.08),transparent 25%),linear-gradient(145deg,rgba(70,110,64,.09),#090b08 72%)!important}
.realm-grove .switch-panel{border-radius:5px 44px 5px 26px!important;border-left-style:dashed!important;background:linear-gradient(160deg,rgba(91,135,86,.1),#090b08 70%)!important}
.realm-meridian .switch-panel{border-radius:30px 30px 6px 6px!important;background:radial-gradient(circle at 90% 0,rgba(229,179,78,.1),transparent 28%),linear-gradient(145deg,rgba(140,96,20,.08),#0b0a07 72%)!important}
.realm-foundry .switch-panel{border-radius:3px!important;border-left:4px solid rgba(212,106,62,.42)!important;background:linear-gradient(135deg,rgba(145,55,28,.12),#0b0806 72%)!important}
.realm-facets .switch-panel{border-radius:22px 4px 34px 4px!important;background:linear-gradient(125deg,rgba(199,153,202,.1),transparent 38%),linear-gradient(145deg,#120e13,#09080a 72%)!important}
.realm-citadel .switch-panel{border-radius:0 42px 0 22px!important;background:repeating-linear-gradient(170deg,transparent 0 48px,rgba(189,90,100,.025) 49px 50px),linear-gradient(145deg,rgba(105,29,41,.1),#0a0708 72%)!important}
.realm-harbor .switch-panel{border-radius:46px 5px 46px 5px!important;background:radial-gradient(circle at 90% 15%,rgba(101,161,165,.1),transparent 28%),linear-gradient(145deg,rgba(41,91,96,.1),#070a0b 72%)!important}
.realm-archive .switch-panel{border-radius:6px 6px 30px 6px!important;background:linear-gradient(90deg,rgba(184,108,68,.045),transparent 46%,rgba(132,185,196,.06)),linear-gradient(145deg,#0f1516,#080a0a 72%)!important}
/* realm device variants without clipping */
.realm-garden .realm-device{border-radius:34px 5px 24px 5px!important}.realm-grove .realm-device{border-radius:5px 42px 5px 24px!important}.realm-meridian .realm-device{border-radius:28px 28px 5px 5px!important}.realm-foundry .realm-device{border-radius:2px!important}.realm-facets .realm-device{border-radius:20px 4px 30px 4px!important}.realm-citadel .realm-device{border-radius:0 40px 0 20px!important}.realm-harbor .realm-device{border-radius:42px 5px 42px 5px!important}.realm-archive .realm-device{border-radius:5px 5px 28px 5px!important}

/* ================================================================
   MAGIC DETAIL PAGES — legible, differentiated and cheaper to animate
   ================================================================ */
.magic-page .identity-stage{min-height:0;padding-top:28px;padding-bottom:34px}
.magic-page .switch-panel{min-height:0!important;overflow:visible!important;clip-path:none!important}
.magic-page .reading-copy{font-size:18px;line-height:1.78;max-width:78ch;overflow-wrap:anywhere}
.magic-page .deep-read>div{font-size:17.5px;line-height:1.78;max-width:78ch}
.magic-page .school-ritual{height:145px;contain:paint;isolation:isolate}
/* keep every school visually different while using transform/opacity animations */
.school-dial{background:radial-gradient(800px 430px at 82% 0,rgba(224,166,61,.14),transparent 62%),linear-gradient(180deg,#161106,#090907 58%,#060605)}
.school-prism{background:radial-gradient(850px 450px at 82% 0,rgba(205,122,108,.12),transparent 62%),linear-gradient(180deg,#17100d,#0a0908 58%,#060605)}
.school-organism{background:radial-gradient(850px 500px at 82% 0,rgba(101,153,103,.13),transparent 64%),linear-gradient(180deg,#0d1610,#090b09 58%,#060706)}
.school-laboratory{background:radial-gradient(820px 470px at 82% 0,rgba(145,167,91,.12),transparent 64%),linear-gradient(180deg,#11150b,#090a08 58%,#060706)}
.school-metabolic{background:radial-gradient(850px 500px at 82% 0,rgba(157,119,82,.13),transparent 64%),linear-gradient(180deg,#15100b,#0a0907 58%,#060605)}
.school-forge{background:radial-gradient(900px 480px at 82% 0,rgba(192,66,28,.14),transparent 62%),linear-gradient(180deg,#180d08,#0b0806 58%,#060504)}
.school-crystal{background:radial-gradient(850px 500px at 82% 0,rgba(167,112,177,.13),transparent 62%),linear-gradient(180deg,#141015,#0a090b 58%,#060506)}
.school-mirror{background:radial-gradient(900px 480px at 82% 0,rgba(168,58,74,.12),transparent 62%),linear-gradient(180deg,#150b0e,#0a0809 58%,#060506)}
.school-gate{background:radial-gradient(900px 500px at 82% 0,rgba(54,125,132,.14),transparent 62%),linear-gradient(180deg,#0a1416,#080b0c 58%,#050606)}
.school-gradient{background:linear-gradient(105deg,rgba(171,93,56,.055),transparent 45%,rgba(118,175,188,.07)),linear-gradient(180deg,#111719,#090b0c 58%,#060707)}
.school-orbit{background:radial-gradient(850px 500px at 82% 0,rgba(137,93,163,.14),transparent 62%),linear-gradient(180deg,#120d17,#09080b 58%,#060506)}
/* replace filter-heavy page animations */
.realm-facets .identity-stage:before,.school-crystal .school-ritual:before,.god-avarenne .divine-ritual:before{animation:prismMoveV4 8s ease-in-out infinite alternate!important}
.realm-foundry .identity-stage:before,.school-forge .school-ritual:before,.god-cyras .divine-ritual:before{animation:forgePulseV4 3s ease-in-out infinite!important}
@keyframes prismMoveV4{to{transform:translateY(-7px) rotate(2.5deg);opacity:.62}}
@keyframes forgePulseV4{50%{opacity:.34;transform:scaleX(.96)}}

/* ================================================================
   ELEMENTALISM — four visibly different archaic elemental macros
   ================================================================ */
.magic-elemental-page{--accent:#b9a26b;background:radial-gradient(860px 480px at 80% 0,rgba(151,120,67,.11),transparent 64%),linear-gradient(180deg,#12110c,#090a08 58%,#060706)}
.magic-elemental-page .school-ritual{display:none}
.elemental-showcase{margin:18px 0 38px;padding:28px 26px 30px;border:1px solid rgba(211,192,144,.14);background:linear-gradient(145deg,rgba(173,145,83,.045),rgba(8,9,7,.78));border-radius:22px 5px 22px 5px;overflow:hidden;position:relative}
.elemental-showcase header{display:flex;align-items:end;justify-content:space-between;gap:22px;margin-bottom:20px}
.elemental-showcase header h2{font-size:clamp(30px,4vw,46px);margin:4px 0 0}.elemental-showcase header p{max-width:520px;margin:0;color:#bcb4a5;font-size:16px}
.elemental-wheel{position:relative;min-height:474px;display:grid;place-items:center;padding:34px 0;overflow:visible;border-top:1px solid rgba(231,215,177,.1);border-bottom:1px solid rgba(231,215,177,.1);background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.018),transparent 48%)}
.elemental-core{position:relative;z-index:4;width:min(290px,42%);min-height:182px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px;border-radius:50%;border:1px solid rgba(215,199,159,.16);background:radial-gradient(circle,#11120d 0,#080907 72%);box-shadow:0 16px 45px rgba(0,0,0,.28)}
.elemental-core span{font:760 10px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#988f7e}.elemental-core strong{font:500 33px/1.1 var(--display);margin:7px 0;color:#e8dcc3}.elemental-core p{font-size:15px;line-height:1.55;color:#bbb2a2;margin:0;max-width:29ch}
.element-token{position:absolute;width:138px;height:138px;border:1px solid rgba(255,255,255,.1);background:#0b0c09;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:transform .22s ease,border-color .22s ease,background .22s ease;color:#d7cbb4}
.element-token span{font:760 13px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase}.element-token .element-glyph{position:relative;width:62px;height:62px;display:block}
.element-token[data-element="fire"]{left:6%;top:50%;transform:translateY(-50%);--el:#d9693d;border-radius:50% 8px 50% 8px}.element-token[data-element="water"]{right:6%;top:50%;transform:translateY(-50%);--el:#5da4be;border-radius:8px 50% 8px 50%}.element-token[data-element="air"]{left:50%;top:34px;transform:translateX(-50%);--el:#b9d1c5;border-radius:50%}.element-token[data-element="earth"]{left:50%;bottom:34px;transform:translateX(-50%);--el:#b28a4f;border-radius:5px}
.element-token:hover,.element-token.active{border-color:var(--el);background:color-mix(in srgb,var(--el) 8%,#0b0c09);box-shadow:0 0 28px color-mix(in srgb,var(--el) 10%,transparent)}
.element-token[data-element="fire"]:hover,.element-token[data-element="fire"].active{transform:translateY(-50%) scale(1.045)}.element-token[data-element="water"]:hover,.element-token[data-element="water"].active{transform:translateY(-50%) scale(1.045)}.element-token[data-element="air"]:hover,.element-token[data-element="air"].active{transform:translateX(-50%) scale(1.045)}.element-token[data-element="earth"]:hover,.element-token[data-element="earth"].active{transform:translateX(-50%) scale(1.045)}
/* fire */
.element-token[data-element="fire"] .element-glyph:before,.element-token[data-element="fire"] .element-glyph:after{content:"";position:absolute;left:50%;bottom:6px;transform-origin:50% 100%;background:linear-gradient(180deg,#aa3f25,#eb8a43 58%,#f7cf78);clip-path:polygon(50% 0,72% 34%,62% 50%,82% 68%,66% 100%,31% 100%,18% 68%,38% 47%,32% 26%)}
.element-token[data-element="fire"] .element-glyph:before{width:42px;height:58px;transform:translateX(-50%);animation:elementFireV4 1.25s ease-in-out infinite alternate}.element-token[data-element="fire"] .element-glyph:after{width:25px;height:39px;transform:translateX(-50%);background:linear-gradient(180deg,#f0a555,#ffe2a5);animation:elementFireV4 .9s ease-in-out infinite alternate-reverse}
@keyframes elementFireV4{to{transform:translateX(-50%) scaleX(.83) scaleY(1.08) rotate(3deg)}}
/* water */
.element-token[data-element="water"] .element-glyph:before{content:"";position:absolute;left:50%;top:50%;width:42px;height:52px;transform:translate(-50%,-50%) rotate(45deg);border-radius:50% 50% 50% 8%;background:linear-gradient(135deg,#9bdded,#4d92ad);animation:elementWaterV4 2.4s ease-in-out infinite}
.element-token[data-element="water"] .element-glyph:after{content:"";position:absolute;left:50%;bottom:1px;width:58px;height:14px;transform:translateX(-50%);border:1px solid rgba(91,170,197,.55);border-radius:50%;animation:waterRippleV4 2.2s ease-out infinite}
@keyframes elementWaterV4{50%{transform:translate(-50%,-54%) rotate(45deg) scale(.94)}}@keyframes waterRippleV4{0%{transform:translateX(-50%) scale(.5);opacity:.8}100%{transform:translateX(-50%) scale(1.25);opacity:0}}
/* air */
.element-token[data-element="air"] .element-glyph:before,.element-token[data-element="air"] .element-glyph:after{content:"";position:absolute;border:2px solid rgba(187,216,203,.75);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%}
.element-token[data-element="air"] .element-glyph:before{inset:8px;animation:elementAirV4 4s linear infinite}.element-token[data-element="air"] .element-glyph:after{inset:18px;animation:elementAirV4 2.8s linear infinite reverse}
@keyframes elementAirV4{to{transform:rotate(360deg)}}
/* earth */
.element-token[data-element="earth"] .element-glyph:before{content:"";position:absolute;left:9px;right:9px;bottom:9px;height:38px;background:linear-gradient(145deg,#c8a15d,#75552d);clip-path:polygon(8% 100%,0 42%,28% 18%,43% 38%,64% 0,100% 35%,91% 100%);animation:elementEarthV4 2.8s ease-in-out infinite alternate}.element-token[data-element="earth"] .element-glyph:after{content:"";position:absolute;left:10px;right:10px;bottom:5px;height:2px;background:#b48b4e;box-shadow:0 0 0 5px rgba(178,138,79,.05)}
@keyframes elementEarthV4{to{transform:translateY(-3px);opacity:.82}}
.elemental-footnote{margin:17px 2px 0!important;font:690 12px/1.55 var(--sans);letter-spacing:.035em;color:#a69e91}
.elemental-showcase[data-active="fire"] .elemental-core strong{color:#e58a56}.elemental-showcase[data-active="water"] .elemental-core strong{color:#84c7db}.elemental-showcase[data-active="air"] .elemental-core strong{color:#cae0d5}.elemental-showcase[data-active="earth"] .elemental-core strong{color:#c6a167}

/* ---------- General text/layout safety ---------- */
.switch-panels,.reading-copy,.deep-read,.deep-read>div,.identity-copy,.realm-copy{min-width:0}
.reading-copy p,.deep-read p{text-wrap:pretty}
.switch-panel p,.story-chapter p{overflow-wrap:anywhere}

/* ================================================================
   Responsive repair
   ================================================================ */
@media(max-width:1080px){
  .magic-portal{--orbit-radius:270px;width:min(690px,70vw)}
  .school-node{--node-size:120px}.school-node b{font-size:15px!important}.school-node small{font-size:10px!important}
  .realm-road{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .section-magia .magic-entry-stage{display:block;min-height:auto;padding-top:96px}
  .magic-entry-title{max-width:690px}.magic-entry-title p{max-width:52ch}
  .magic-portal-wrap{min-height:700px;margin-top:6px}
  .magic-portal{--orbit-radius:255px;width:min(650px,92vw)}
  .realm-road{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important}
  .realm-page .codex-switcher{grid-template-columns:190px minmax(0,1fr)!important;gap:18px!important}
}
@media(max-width:720px){
  .world-glow{opacity:.1}
  .magic-portal-wrap{min-height:620px;overflow:visible}
  .magic-portal{--orbit-radius:218px;width:min(570px,96vw)}
  .portal-center{width:154px!important;height:154px}.blue-flame{width:82px!important;height:108px!important}.portal-center span{font-size:9px!important}
  .school-node{--node-size:96px;min-height:92px!important}.school-node:before{width:58px;height:58px}.school-node img{width:38px!important;height:38px!important;margin:9px 0 6px!important}.school-node b{font-size:12.5px!important}.school-node small{font-size:9px!important;max-width:92px}
  .magic-doctrine{grid-template-columns:repeat(3,1fr)!important}.doctrine-knot{padding:18px 8px}.doctrine-knot span{font-size:21px}
  .foundation-runes{grid-template-columns:1fr 1fr!important}
  .realm-page .codex-switcher{display:block!important}.realm-page .switch-tabs{position:static!important;display:flex!important;flex-direction:row!important;overflow-x:auto!important;margin-bottom:12px;padding-bottom:7px}.realm-page .switch-tab{min-width:158px!important;border-left:0!important;border-bottom:1px solid color-mix(in srgb,var(--accent) 24%,transparent)!important}.realm-page .switch-tab.active{transform:none!important;border-bottom-color:var(--accent)!important}
  .realm-page .switch-panel{padding:25px 20px!important}
  .elemental-showcase{padding:20px 16px 22px}.elemental-showcase header{display:block}.elemental-showcase header p{margin-top:8px}.elemental-wheel{min-height:560px;padding:22px 0}.elemental-core{width:56%;min-height:170px}.element-token{width:118px;height:118px}.element-token[data-element="fire"]{left:2%;top:50%}.element-token[data-element="water"]{right:2%;top:50%}.element-token[data-element="air"]{top:26px}.element-token[data-element="earth"]{bottom:26px}
}
@media(max-width:520px){
  .magic-entry-title{text-align:center}.magic-entry-title p{margin-left:auto;margin-right:auto}.scroll-rune{display:none}
  .magic-portal-wrap{min-height:535px;margin-inline:-8px}
  .magic-portal{--orbit-radius:182px;width:460px;max-width:calc(100vw - 8px)}
  .portal-center{width:128px!important;height:128px}.portal-center:before{inset:-10px}.portal-center span{display:none!important}.blue-flame{width:68px!important;height:90px!important;transform:translateY(0)}
  .school-node{--node-size:80px;min-height:78px!important}.school-node:before{width:48px;height:48px}.school-node img{width:31px!important;height:31px!important;margin:8px 0 5px!important}.school-node b{font-size:10.5px!important}.school-node small{display:none!important}
  .magic-doctrine{grid-template-columns:1fr!important}.foundation-runes{grid-template-columns:1fr!important}
  .realm-road{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px!important}.realm-copy{padding:14px 12px 13px!important}.realm-copy small{font-size:8.5px!important}.realm-copy h2{font-size:27px!important}.realm-copy .realm-tag{font-size:12px!important}.realm-copy b{font-size:9px}.realm-symbol{width:44px;height:44px;right:10px;top:10px}.realm-symbol img{width:28px!important;max-height:28px}
  .realm-page .reading-copy{font-size:17px!important}.realm-page .deep-read>div{font-size:16.5px}.fact-ribbon{grid-template-columns:1fr!important}
  .elemental-wheel{min-height:auto;display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:10px 0}.elemental-core{grid-column:1/-1;grid-row:1;width:100%;min-height:145px;border-radius:18px 4px 18px 4px;margin-bottom:3px}.element-token,.element-token[data-element="fire"],.element-token[data-element="water"],.element-token[data-element="air"],.element-token[data-element="earth"]{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none!important;width:100%;height:118px;border-radius:14px 3px 14px 3px}.element-token:hover,.element-token.active{transform:translateY(-2px)!important}
}
@media(prefers-reduced-motion:reduce){
  .magic-portal:after,.portal-center:before,.portal-center:after,.blue-flame:before,.blue-flame:after,.blue-flame i,.element-token .element-glyph:before,.element-token .element-glyph:after{animation:none!important}
  .realm-landscape:hover,.school-node:hover,.element-token:hover,.element-token.active{transform:none!important}
}
/* Final GPU-cost cleanup for the remaining legacy animations. */
.god-cyras .identity-stage:before{animation:godForgeV4 5s ease-in-out infinite alternate!important}
.god-avarenne .identity-stage:before{animation:godPrismV4 9s ease-in-out infinite alternate!important}
.school-prism .school-ritual:before{animation:spectrumMoveV4 7s ease-in-out infinite alternate!important}
@keyframes godForgeV4{to{transform:translateY(-7px);opacity:.1}}
@keyframes godPrismV4{to{transform:rotate(7deg) translateY(-4px);opacity:.1}}
@keyframes spectrumMoveV4{to{transform:translateX(4%);opacity:.7}}
@media(max-width:430px){
  .realm-road{grid-template-columns:1fr!important;gap:8px!important}
  .realm-landscape,.realm-landscape:nth-child(even){aspect-ratio:1/1!important}
  .realm-copy{padding:18px 16px 16px!important}.realm-copy small{font-size:10px!important}.realm-copy h2{font-size:34px!important}.realm-copy .realm-tag{font-size:14px!important}.realm-copy b{font-size:10px!important}
}