/* Elemental accents belong to the figure, never to a surrounding card or ring. */
.ce-field{--ce-power:.55;position:absolute;z-index:2;inset:-7% -15% 2%;pointer-events:none;opacity:var(--ce-power);isolation:isolate;transition:opacity .45s ease}
.ce-tier-1{--ce-power:.52}.ce-tier-2{--ce-power:.58}.ce-tier-3{--ce-power:.64}.ce-tier-4{--ce-power:.7}.ce-tier-5{--ce-power:.76}.ce-tier-6{--ce-power:.82}.ce-tier-7{--ce-power:.86}.ce-tier-8{--ce-power:.9}.ce-tier-9{--ce-power:.95}.ce-tier-10{--ce-power:1}
.qw-preview:hover .ce-field,.qw-preview:focus-within .ce-field,.qw-floating-profile:hover .ce-field{opacity:1}
.ce-layer{position:absolute;inset:0;display:block;--ce-color:#20b486;--ce-glow:rgba(32,180,134,.28)}
.ce-layer b{position:absolute;display:block;pointer-events:none}
.ce-orbit{width:20%;height:18%;border:0;border-radius:50%;background:radial-gradient(circle,var(--ce-glow),transparent 72%);filter:blur(8px);opacity:.35;animation:ce-aura 5.2s ease-in-out infinite alternate}
.ce-mark{width:12px;height:12px;background:var(--ce-color);filter:drop-shadow(0 0 5px var(--ce-glow));animation:ce-float 4.6s ease-in-out infinite alternate}
.ce-mark-b{animation-delay:-1.6s}.ce-mark-c{animation-delay:-3.1s}
/* Different silhouettes and positions prevent a mechanical circular route. */
.ce-wind{--ce-color:#31bca0;--ce-glow:rgba(43,193,159,.42)}
.ce-wind .ce-orbit{left:1%;top:36%}
.ce-wind .ce-mark{width:29px;height:11px;border-top:2.5px solid var(--ce-color);border-radius:70% 30% 0 0;background:none;animation-name:ce-wind-drift}
.ce-wind .ce-mark-a{left:1%;top:20%}.ce-wind .ce-mark-b{right:2%;top:53%;width:20px}.ce-wind .ce-mark-c{left:11%;bottom:14%;width:24px}
.ce-water{--ce-color:#38b6da;--ce-glow:rgba(43,180,222,.4)}
.ce-water .ce-orbit{right:0;bottom:25%}
.ce-water .ce-mark{width:11px;height:16px;background:linear-gradient(145deg,#ddfaff,#3ab9de);border-radius:60% 60% 60% 0;animation-name:ce-drop}
.ce-water .ce-mark-a{right:10%;top:19%}.ce-water .ce-mark-b{left:5%;top:54%;width:8px;height:12px}.ce-water .ce-mark-c{right:6%;bottom:17%;width:9px;height:13px}
.ce-fire{--ce-color:#f58942;--ce-glow:rgba(250,109,40,.43)}
.ce-fire .ce-orbit{left:16%;bottom:7%;width:22%;height:16%}
.ce-fire .ce-mark{width:13px;height:20px;background:linear-gradient(15deg,#ffe37c,#f87930 70%,transparent);clip-path:polygon(48% 0,76% 33%,100% 76%,75% 100%,13% 100%,0 68%,22% 38%);animation-name:ce-flame}
.ce-fire .ce-mark-a{left:8%;top:38%}.ce-fire .ce-mark-b{right:9%;top:28%;width:10px;height:16px}.ce-fire .ce-mark-c{left:21%;bottom:11%;width:15px;height:23px}
.ce-ice{--ce-color:#71d8f0;--ce-glow:rgba(105,213,244,.4)}
.ce-ice .ce-orbit{right:10%;top:10%}
.ce-ice .ce-mark{width:13px;height:13px;background:linear-gradient(135deg,#fff 5%,#9bebfa 42%,#56bfdf);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);animation-name:ce-crystal}
.ce-ice .ce-mark-a{left:17%;top:12%}.ce-ice .ce-mark-b{right:16%;top:15%;width:10px;height:10px}.ce-ice .ce-mark-c{left:5%;bottom:29%;width:9px;height:9px}
.ce-lightning{--ce-color:#eabc27;--ce-glow:rgba(234,185,43,.48)}
.ce-lightning .ce-orbit{right:2%;top:35%}
.ce-lightning .ce-mark{width:12px;height:25px;background:linear-gradient(#fff4b1,#efbf26);clip-path:polygon(48% 0,100% 0,60% 42%,88% 42%,16% 100%,37% 55%,5% 55%);animation-name:ce-charge;animation-duration:3.2s}
.ce-lightning .ce-mark-a{right:3%;top:35%}.ce-lightning .ce-mark-b{left:10%;top:10%;width:9px;height:19px}.ce-lightning .ce-mark-c{right:13%;bottom:19%;width:8px;height:17px}
.ce-platinum .ce-mark{filter:drop-shadow(0 0 7px rgba(242,207,121,.5))}
.ce-mini{position:relative;display:block;width:100%;height:100%;isolation:isolate}
.ce-mini>img{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:contain}
.ce-mini .ce-field{inset:-2% -11% 0;z-index:2}
.ce-mini .ce-orbit{opacity:.2;filter:blur(4px)}.ce-mini .ce-mark{scale:.58}
.qw-floating-art .ce-mini{width:100%;height:100%}
.qw-place-mini .ce-mini{flex:0 0 43px;width:43px;height:55px}
.qw-place-mini .ce-mini>img{width:100%;height:100%;object-fit:contain;border-radius:0}
.qw-art.qw-compact .ce-field{display:none}
.ce-buffs{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}.ce-buff{border-radius:999px;background:#eaf8f1;color:#007e51;padding:3px 7px;font-size:.72rem;font-weight:750}
.ce-motion-toggle{border:0;background:transparent;color:#007e51;font:inherit;font-size:.76rem;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px 8px;margin:4px auto 0}
.ce-motion-toggle:focus-visible{outline:3px solid #20b486;outline-offset:3px;border-radius:4px}
@keyframes ce-aura{from{transform:translate(-3px,4px) scale(.8);opacity:.22}to{transform:translate(5px,-5px) scale(1.12);opacity:.52}}
@keyframes ce-float{from{transform:translate(-2px,3px) scale(.9);opacity:.55}to{transform:translate(5px,-8px) scale(1.09);opacity:1}}
@keyframes ce-wind-drift{from{transform:translate(-6px,5px) rotate(-19deg);opacity:.38}to{transform:translate(8px,-7px) rotate(-7deg);opacity:.95}}
@keyframes ce-drop{from{transform:translate(-3px,5px) rotate(-45deg) scale(.8);opacity:.45}to{transform:translate(4px,-9px) rotate(-45deg) scale(1.1);opacity:.95}}
@keyframes ce-flame{from{transform:translateY(4px) rotate(-6deg) scale(.83);opacity:.48}to{transform:translateY(-7px) rotate(5deg) scale(1.12);opacity:1}}
@keyframes ce-crystal{from{transform:translateY(2px) rotate(-12deg) scale(.72);opacity:.42}to{transform:translateY(-6px) rotate(35deg) scale(1.08);opacity:1}}
@keyframes ce-charge{0%,100%{transform:translateY(3px) scale(.82);opacity:.48}50%{transform:translateY(-6px) scale(1.1);opacity:1}}
html[data-ce-motion="off"] .ce-layer b{animation:none!important}
html[data-ce-motion="off"] .ce-orbit{opacity:.2}
html[data-ce-motion="off"] .ce-mark{opacity:.72}
html[data-ce-motion="off"] .qw-page[data-qw-style=classic] .qw-preview .qw-art.qw-has-pose .qw-portrait,
html[data-ce-motion="off"] .qw-page[data-qw-style=classic] .qw-preview .qw-art.qw-has-pose .qw-action-pose{animation:none!important}
html[data-ce-motion="off"] .qw-page[data-qw-style=classic] .qw-preview .qw-art.qw-has-pose .qw-portrait{opacity:1!important}
html[data-ce-motion="off"] .qw-page[data-qw-style=classic] .qw-preview .qw-art.qw-has-pose .qw-action-pose{opacity:0!important}
html[data-ce-motion="on"] .qw-page[data-qw-style=classic] .qw-preview .qw-art.qw-has-pose .qw-portrait,
html[data-ce-motion="on"] .qw-page[data-qw-style=classic] .qw-preview .qw-art.qw-has-pose .qw-action-pose{animation-duration:12s!important}
/* Explicit in-page opt-in overrides the site's generic reduced-motion rule. */
html[data-ce-motion="on"] .ce-field{transition:opacity .45s ease!important}
html[data-ce-motion="on"] .ce-orbit{animation:ce-aura 5.2s ease-in-out infinite alternate!important}
html[data-ce-motion="on"] .ce-mark{animation:ce-float 4.6s ease-in-out infinite alternate!important}
html[data-ce-motion="on"] .ce-wind .ce-mark{animation:ce-wind-drift 4.4s ease-in-out infinite alternate!important}
html[data-ce-motion="on"] .ce-water .ce-mark{animation:ce-drop 4.8s ease-in-out infinite alternate!important}
html[data-ce-motion="on"] .ce-fire .ce-mark{animation:ce-flame 2.8s ease-in-out infinite alternate!important}
html[data-ce-motion="on"] .ce-ice .ce-mark{animation:ce-crystal 4s ease-in-out infinite alternate!important}
html[data-ce-motion="on"] .ce-lightning .ce-mark{animation:ce-charge 3.2s ease-in-out infinite!important}

/* Game-like aura: luminous silhouette, two uneven energy plumes, and short
   elemental ribbons. Unlike a magic circle, these hug the person and gear. */
.qw-page[data-qw-style=classic] .qw-art:has(.ce-field){--ce-rim:rgba(32,180,134,.45);--ce-haze:rgba(32,180,134,.27);--ce-haze-2:rgba(51,180,185,.19)}
.qw-page[data-qw-style=classic] .qw-art:has(.ce-water){--ce-rim:rgba(40,169,216,.55);--ce-haze:rgba(58,190,234,.3);--ce-haze-2:rgba(83,198,225,.19)}
.qw-page[data-qw-style=classic] .qw-art:has(.ce-fire){--ce-rim:rgba(248,135,49,.62);--ce-haze:rgba(255,154,70,.31);--ce-haze-2:rgba(244,92,49,.17)}
.qw-page[data-qw-style=classic] .qw-art:has(.ce-ice){--ce-rim:rgba(68,188,229,.58);--ce-haze:rgba(115,222,246,.29);--ce-haze-2:rgba(115,176,236,.2)}
.qw-page[data-qw-style=classic] .qw-art:has(.ce-lightning){--ce-rim:rgba(230,183,37,.57);--ce-haze:rgba(244,211,75,.3);--ce-haze-2:rgba(164,131,218,.16)}
.qw-page[data-qw-style=classic] .qw-art:has(.ce-tier-10){--ce-rim:rgba(47,183,205,.64);--ce-haze:rgba(83,203,231,.29);--ce-haze-2:rgba(246,179,96,.2)}
.qw-page[data-qw-style=classic] .qw-art:has(.ce-field)::before{content:"";position:absolute;z-index:0;inset:4% -15% 1%;pointer-events:none;background:radial-gradient(ellipse 38% 48% at 43% 44%,var(--ce-haze),transparent 86%),radial-gradient(ellipse 35% 44% at 58% 67%,var(--ce-haze-2),transparent 90%),radial-gradient(ellipse 32% 24% at 50% 91%,var(--ce-haze),transparent 90%);filter:blur(10px);opacity:.82;animation:ce-bloom 4.2s ease-in-out infinite alternate}
.qw-page[data-qw-style=classic] .qw-art:has(.ce-field) .qw-figure{position:relative;z-index:1}
.qw-page[data-qw-style=classic] .qw-preview .qw-art:has(.ce-field) .qw-figure img{filter:drop-shadow(0 0 7px var(--ce-rim)) drop-shadow(0 0 16px var(--ce-rim)) drop-shadow(0 8px 8px rgba(35,42,39,.1))!important}
.ce-field{inset:-5% -7% 0}
.ce-layer::before{content:"";position:absolute;display:block;pointer-events:none;width:20%;height:40%;border-left:3px solid var(--ce-color);border-radius:65% 12% 58% 25%;filter:drop-shadow(0 0 5px var(--ce-color));opacity:.6;mask-image:linear-gradient(to bottom,transparent 0,#000 25%,#000 70%,transparent 100%);animation:ce-ribbon 4s ease-in-out infinite alternate}
.ce-wind::before{left:8%;top:18%;height:48%;transform:rotate(-14deg)}
.ce-water::before{right:5%;top:34%;height:42%;transform:rotate(17deg);border-left:0;border-right:3px solid var(--ce-color)}
.ce-fire::before{left:9%;bottom:9%;height:38%;width:18%;transform:rotate(9deg);border-left-width:4px}
.ce-ice::before{right:12%;top:12%;height:35%;width:14%;transform:rotate(-12deg);border-left-width:2px}
.ce-lightning::before{right:7%;top:17%;height:49%;width:17%;transform:rotate(18deg);border-left-style:dashed}
.ce-mark{filter:drop-shadow(0 0 4px var(--ce-color)) drop-shadow(0 0 8px var(--ce-glow))}
.ce-wind .ce-mark{border-top-width:3px;width:34px}
.ce-water .ce-mark{width:13px;height:19px}
.ce-fire .ce-mark{width:17px;height:27px}
.ce-ice .ce-mark{width:15px;height:15px}
.ce-lightning .ce-mark{width:15px;height:30px}
.ce-mini:has(.ce-field)::before{content:"";position:absolute;z-index:0;inset:9% 0 4%;background:radial-gradient(ellipse,rgba(58,190,212,.3),transparent 68%);filter:blur(5px);pointer-events:none}
.ce-mini:has(.ce-field)>img{filter:drop-shadow(0 0 4px rgba(32,180,134,.52))}
.ce-mini:has(.ce-water)>img{filter:drop-shadow(0 0 4px rgba(45,180,224,.54))}
.ce-mini:has(.ce-fire)>img{filter:drop-shadow(0 0 4px rgba(246,125,49,.56))}
.ce-mini:has(.ce-ice)>img{filter:drop-shadow(0 0 4px rgba(80,203,237,.55))}
.ce-mini:has(.ce-lightning)>img{filter:drop-shadow(0 0 4px rgba(229,185,46,.54))}
.ce-mini:has(.ce-tier-10)>img{filter:drop-shadow(0 0 5px rgba(54,187,214,.58))}
.ce-mini .ce-field{inset:-3% -7% 0}
.ce-mini .ce-layer::before{border-width:1px;opacity:.45;filter:none}
.ce-mini .ce-mark{scale:.52}
@keyframes ce-bloom{from{transform:translate(-3px,3px) scale(.94);opacity:.67}to{transform:translate(4px,-4px) scale(1.06);opacity:.94}}
@keyframes ce-ribbon{from{translate:-3px 5px;scale:.93;opacity:.35}to{translate:5px -7px;scale:1.06;opacity:.83}}
html[data-ce-motion="off"] .qw-art:has(.ce-field)::before,html[data-ce-motion="off"] .ce-layer::before{animation:none!important}
html[data-ce-motion="on"] .qw-art:has(.ce-field)::before{animation:ce-bloom 4.2s ease-in-out infinite alternate!important}
html[data-ce-motion="on"] .ce-layer::before{animation:ce-ribbon 4s ease-in-out infinite alternate!important}
/* Canvas fallback: retain a soft aura without the old line/icon particles. */
.ce-layer::before,.ce-layer .ce-mark{display:none!important}
.ce-layer .ce-orbit{width:42%;height:39%;opacity:.44;filter:blur(13px)}
