/* Symbol-specific light and particle choreography, aligned to original art. */
.cell>.symbol{position:relative;isolation:isolate;--magic:#8eeaf5}
.cell[data-symbol="1"]>.symbol{--magic:#ffb656}
.cell[data-symbol="3"]>.symbol{--magic:#d38aff}
.cell[data-symbol="9"]>.symbol{--magic:#ffd18a}
.cell.winner .symbol,.cell.winner[data-symbol="4"] .symbol,.cell.scatter[data-symbol="9"] .symbol,.locked-overlay[data-symbol="9"] .symbol{animation:none;transform:none;filter:none}
.cell>.symbol:before,.cell>.symbol:after{content:'';position:absolute;pointer-events:none;opacity:0}
/* Two witches: opposing arcs of lunar and solar magic, leaving faces clear. */
.cell.winner:is([data-symbol="0"],[data-symbol="1"])>.symbol:before{inset:5%;border-radius:50%;border:2px solid transparent;border-left-color:var(--magic);border-bottom-color:var(--magic);box-shadow:-2px 2px 8px color-mix(in srgb,var(--magic) 45%,transparent);animation:witch-arc 2.8s ease-in-out infinite}
.cell.winner:is([data-symbol="0"],[data-symbol="1"])>.symbol:after{inset:0;background:radial-gradient(circle at 12% 65%,var(--magic) 0 1.5%,transparent 3%),radial-gradient(circle at 82% 25%,var(--magic) 0 1%,transparent 2.5%),radial-gradient(circle at 73% 88%,var(--magic) 0 1.5%,transparent 3%);animation:witch-stars 2.1s ease-in-out infinite}
.cell.winner[data-symbol="1"]>.symbol:before{animation-direction:reverse;border-left-color:transparent;border-right-color:var(--magic)}
/* Raven eye matches the eye at 68%,24% of the source image. */
.cell.winner[data-symbol="2"]>.symbol:before{left:65%;top:21%;width:6%;height:6%;border-radius:50%;background:#c2faff;box-shadow:0 0 6px #5cd6ff;animation:raven-eye 2.2s ease-in-out infinite}
.cell.winner[data-symbol="2"]>.symbol:after{inset:0;background:linear-gradient(125deg,transparent 30%,#6ddcff80 45%,transparent 57%);mask:url('../../assets/bruxas-do-eclipse/sprites-v10/raven.webp') center/contain no-repeat;animation:raven-sheen 3s ease-in-out infinite}
/* Bubbles remain inside the bulb of the potion bottle. */
.cell.winner[data-symbol="3"]>.symbol:before,.cell.winner[data-symbol="3"]>.symbol:after{left:28%;top:55%;width:44%;height:26%;border-radius:45%;background:radial-gradient(circle at 15% 75%,#efc8ff 0 3%,transparent 5%),radial-gradient(circle at 48% 45%,#e3a1ff 0 4%,transparent 6%),radial-gradient(circle at 79% 90%,#fff0ff 0 2%,transparent 5%);animation:potion-bubbles 1.8s ease-out infinite}
.cell.winner[data-symbol="3"]>.symbol:after{animation-delay:-.9s;left:32%;width:38%;background:radial-gradient(circle at 25% 70%,#e5a5ff 0 3%,transparent 6%),radial-gradient(circle at 70% 55%,#fff0ff 0 3%,transparent 6%)}
/* The grimoire releases separate lunar and solar trails. */
.cell.winner[data-symbol="4"]>.symbol:before,.cell.winner[data-symbol="4"]>.symbol:after{left:18%;top:12%;width:37%;height:56%;border-radius:50%;border:2px solid transparent;border-left-color:#91f4ff;border-top-color:#91f4ff;transform-origin:85% 100%;animation:book-lunar 2s ease-in-out infinite}
.cell.winner[data-symbol="4"]>.symbol:after{left:46%;border-left-color:transparent;border-top-color:#ffc474;border-right-color:#ffc474;transform-origin:15% 100%;animation-name:book-solar;animation-delay:-.3s}
/* Specular highlights clipped to the transparent gemstone artwork. */
.cell[data-symbol="5"]{--gem:url('../../assets/bruxas-do-eclipse/sprites-v10/hearts.webp')}
.cell[data-symbol="6"]{--gem:url('../../assets/bruxas-do-eclipse/sprites-v10/spades.webp')}
.cell[data-symbol="7"]{--gem:url('../../assets/bruxas-do-eclipse/sprites-v10/clubs.webp')}
.cell[data-symbol="8"]{--gem:url('../../assets/bruxas-do-eclipse/sprites-v10/diamonds.webp')}
.cell.winner:is([data-symbol="5"],[data-symbol="6"],[data-symbol="7"],[data-symbol="8"])>.symbol:after{inset:0;background:linear-gradient(115deg,transparent 35%,#fff9dbbd 48%,transparent 61%);background-size:300% 100%;mask:var(--gem) center/contain no-repeat;animation:gem-sweep 2.4s ease-in-out infinite}
/* Corona centered on the eclipse disc, above the SCATTER lettering. */
.cell:is(.scatter,.locked-overlay)[data-symbol="9"]>.symbol:before{left:17%;top:8%;width:66%;height:66%;border-radius:50%;background:conic-gradient(transparent 0 60deg,#ffdc98 95deg,transparent 140deg 260deg,#f8b95e 290deg,transparent 340deg);mask:radial-gradient(circle,transparent 59%,#000 62% 66%,transparent 70%);animation:corona-orbit 4s linear infinite;opacity:.9}
.cell:is(.scatter,.locked-overlay)[data-symbol="9"]>.symbol:after{left:12%;top:3%;width:76%;height:76%;border-radius:50%;background:radial-gradient(circle,transparent 50%,#ffd38438 64%,transparent 72%);animation:corona-breathe 2s ease-in-out infinite}
@keyframes witch-arc{0%,100%{opacity:.2;transform:rotate(-12deg)}50%{opacity:.9;transform:rotate(18deg)}}
@keyframes witch-stars{0%,100%{opacity:.15;transform:translateY(2%)}50%{opacity:.85;transform:translateY(-3%)}}
@keyframes raven-eye{0%,70%,100%{opacity:.1}35%{opacity:.85}}
@keyframes raven-sheen{0%,100%{opacity:0}45%{opacity:.45}}
@keyframes potion-bubbles{0%{opacity:0;transform:translateY(5%)}25%{opacity:.9}80%{opacity:.7}100%{opacity:0;transform:translateY(-55%)}}
@keyframes book-lunar{0%,100%{opacity:.1;transform:rotate(10deg) translateY(3%)}50%{opacity:.85;transform:rotate(-14deg) translateY(-8%)}}
@keyframes book-solar{0%,100%{opacity:.1;transform:rotate(-10deg) translateY(3%)}50%{opacity:.85;transform:rotate(14deg) translateY(-8%)}}
@keyframes gem-sweep{0%{opacity:0;background-position:100% 0}20%{opacity:.8}65%{opacity:.8}85%,100%{opacity:0;background-position:0 0}}
@keyframes corona-orbit{to{transform:rotate(360deg)}}
@keyframes corona-breathe{0%,100%{opacity:.2}50%{opacity:.9}}
.spinning>.cell:not(.locked-overlay)>.symbol:before,.spinning>.cell:not(.locked-overlay)>.symbol:after,.spin-strip .symbol:before,.spin-strip .symbol:after{animation:none!important;opacity:0!important}
.page-hidden .cell>.symbol:before,.page-hidden .cell>.symbol:after{animation-play-state:paused!important}
@media(max-width:700px){.cell.winner>.symbol:before,.cell.winner>.symbol:after{border-width:1px}}
@media(prefers-reduced-motion:reduce){.cell>.symbol:before,.cell>.symbol:after{animation:none!important;opacity:0!important}}

/* Versão 15: símbolos vivos. O canvas de live-symbols.js substitui o sprite estático nas vitórias. O objeto nunca gira, escala ou se desloca; só o conteúdo da arte ganha vida. */
.symbol.live{background-image:none!important}
.symbol>canvas.live-art{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.cell.winner[data-symbol="2"]>.symbol.live:before{display:none}
/* With real flames the old swinging arcs over the grimoire are redundant. */
.cell.winner[data-symbol="4"]>.symbol.live:before,.cell.winner[data-symbol="4"]>.symbol.live:after{display:none}
/* The renderer owns these effects; retain CSS only as a WebGL fallback. */
.cell[data-symbol="3"]>.symbol.live:before,.cell[data-symbol="3"]>.symbol.live:after,
.cell[data-symbol="9"]>.symbol.live:before,.cell[data-symbol="9"]>.symbol.live:after{display:none}
.reels:has(.anticipating) .reel.landed .cell[data-symbol="9"]>.symbol{filter:drop-shadow(0 0 5px #f1b85788)}
.cell.scatter[data-symbol="9"]>.symbol.live:after{display:block;content:'';left:17%;top:8%;width:66%;height:66%;border-radius:50%;background:radial-gradient(circle,transparent 48%,#ffe4ae88 63%,transparent 74%);animation:scatter-confirm 850ms ease-out both;pointer-events:none}
@keyframes scatter-confirm{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.cell.scatter[data-symbol="9"]>.symbol.live:after{display:none}}