/* The Grail of Resonance: a stone chalice with a glowing bowl, in Stella's Sanctuary. See js/ui/win-grail.js. */
.spot.grailspot .blk { display: none; }
.spot.grailspot { width: 84px; height: 96px; --glow: #5fd4ff; }
.grailspot .gr { position: absolute; inset: 0; }
.grailspot .gr-bowl { position: absolute; left: 6px; right: 6px; top: 6px; height: 44px; border-radius: 6px 6px 50% 50% / 6px 6px 100% 100%; background: linear-gradient(90deg, #232c47, #46557f 35%, #46557f 65%, #232c47); border: 2px solid #171d33; }
.grailspot .gr-liq { position: absolute; left: 3px; right: 3px; top: -4px; height: 14px; border-radius: 50%; background: radial-gradient(ellipse, #eaffff, var(--glow) 60%, #2a8ed0); box-shadow: 0 0 14px 4px var(--glow); animation: grpulse 2.8s ease-in-out infinite; }
.grailspot .gr-stem { position: absolute; left: 33px; width: 18px; top: 48px; height: 26px; background: linear-gradient(90deg, #1f2740, #435279 40%, #435279 60%, #1f2740); border: 2px solid #171d33; border-top: 0; }
.grailspot .gr-base { position: absolute; left: 14px; right: 14px; bottom: 2px; height: 18px; border-radius: 4px 4px 2px 2px; background: linear-gradient(90deg, #1f2740, #435279 35%, #435279 65%, #1f2740); border: 2px solid #171d33; clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.grailspot[data-fill="0"] .gr-liq { filter: saturate(.3) brightness(.55); box-shadow: 0 0 6px 1px var(--glow); animation: none; }
.grailspot[data-fill="1"] .gr-liq, .grailspot[data-fill="2"] .gr-liq { box-shadow: 0 0 10px 3px var(--glow); }
.grailspot[data-fill="7"] .gr-liq, .grailspot[data-fill="8"] .gr-liq, .grailspot[data-fill="9"] .gr-liq { box-shadow: 0 0 22px 8px var(--glow); }
@keyframes grpulse { 50% { opacity: .78; transform: scaleX(.96); } }

.gr-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 8px; background: #141b2c; border: 1px solid #2c3d63; border-top: 3px solid #5fd4ff; }
.gr-top b { color: #bfeaff; }
.gr-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 7px 10px; margin-bottom: 4px; background: #1a2030; border: 1px solid #2a3350; }
.gr-row.in { border-color: #3a7da0; background: #17293a; }
.gr-row .it { display: flex; align-items: center; gap: 8px; }
.gr-row .it i { width: 12px; height: 12px; flex: none; }
.gr-row .bonus { font-size: 12px; color: #9fb3d6; text-align: right; }
@media (prefers-reduced-motion: reduce) { .grailspot .gr-liq { animation: none; } }