.magic-score { position: absolute; z-index: 12; top: 10px; right: 12px; border-radius: 999px; padding: 8px 13px; background: rgba(255,255,255,.95); font-size: 1.05rem; font-weight: 900; box-shadow: 0 4px 0 rgba(51,39,98,.16); }
.magic-progress { position: absolute; z-index: 12; top: 17px; left: 14px; display: flex; gap: 5px; }
.magic-progress i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.42); box-shadow: 0 1px 4px rgba(40,25,86,.25); }
.magic-progress i.done { background: #ffe46c; box-shadow: 0 0 8px #fff39e; }
.magic-arena { position: relative; height: min(76vh, 620px); overflow: hidden; border: 7px solid #fff; border-radius: 34px; background: #4d3e94 url("assets/oficina-magica.png") center / cover; box-shadow: 0 10px 28px rgba(38,30,88,.28); touch-action: none; user-select: none; isolation: isolate; }
.magic-arena::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 57%, transparent 20%, rgba(27,18,80,.12) 86%); }
.magic-object { position: absolute; z-index: 5; bottom: -130px; width: clamp(92px,23vw,132px); aspect-ratio: 1; border: 0; padding: 0; background: transparent; cursor: crosshair; filter: drop-shadow(0 12px 8px rgba(24,17,58,.38)); }
.magic-half { position: absolute; z-index: 2; inset: 0; background: url("assets/objetos-magicos.png") var(--sprite-x) var(--sprite-y) / 300% 200% no-repeat; pointer-events: none; }
.magic-half--left { clip-path: polygon(0 0, 54% 0, 44% 100%, 0 100%); }
.magic-half--right { clip-path: polygon(54% 0, 100% 0, 100% 100%, 44% 100%); }
.magic-glow { position: absolute; z-index: 1; inset: 9%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.72), rgba(255,226,105,.32) 42%, transparent 70%); animation: magic-glow 1.1s ease-in-out infinite alternate; }
.magic-object.magic-special .magic-glow { inset: -8%; background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,225,72,.58) 43%, transparent 70%); box-shadow: 0 0 28px rgba(255,232,94,.75); }
.magic-object.cut { pointer-events: none; filter: drop-shadow(0 9px 7px rgba(24,17,58,.25)); }
.magic-object.cut .magic-glow { animation: magic-pop .55s ease-out both; }
.magic-object.cut .magic-half--left { animation: magic-left .62s cubic-bezier(.2,.75,.3,1) both; }
.magic-object.cut .magic-half--right { animation: magic-right .62s cubic-bezier(.2,.75,.3,1) both; }
.magic-slash { position: absolute; z-index: 10; width: 76px; height: 10px; border-radius: 999px; background: linear-gradient(90deg, transparent, #fff, #bff7ff, #fff4a8, transparent); box-shadow: 0 0 18px #fff, 0 0 28px #8deeff; transform: translate(-50%,-50%) rotate(-28deg); pointer-events: none; animation: magic-slash .34s ease-out both; }
.magic-burst { position: absolute; z-index: 9; width: 1px; height: 1px; pointer-events: none; }
.magic-burst i { position: absolute; left: 0; top: 0; font-size: 1.45rem; font-style: normal; animation: magic-particle .68s ease-out both; }
.magic-hint { position: absolute; z-index: 3; top: 41%; left: 50%; width: 170px; height: 110px; transform: translate(-50%,-50%); pointer-events: none; animation: magic-hint-hide 4s both; }
.magic-hint span { position: absolute; left: 0; font-size: 4.5rem; filter: drop-shadow(0 5px 4px rgba(20,14,60,.3)); }
.magic-hint b { position: absolute; right: 0; bottom: 0; font-size: 3rem; animation: magic-finger 1.25s ease-in-out 3; }
.magic-hint i { position: absolute; top: 49%; left: 33%; width: 82px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.92); box-shadow: 0 0 12px #a9efff; transform: rotate(-25deg); }
@keyframes magic-glow { to { transform: scale(1.14); opacity: .62; } }
@keyframes magic-left { 25% { transform: translate(-7px,-5px) rotate(-6deg); } to { transform: translate(-82px,72px) rotate(-42deg) scale(.78); opacity: 0; } }
@keyframes magic-right { 25% { transform: translate(7px,-7px) rotate(7deg); } to { transform: translate(86px,65px) rotate(48deg) scale(.78); opacity: 0; } }
@keyframes magic-pop { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
@keyframes magic-slash { from { opacity: 1; transform: translate(-50%,-50%) rotate(-28deg) scaleX(.35); } to { opacity: 0; transform: translate(-50%,-50%) rotate(-28deg) scaleX(1.7); } }
@keyframes magic-particle { from { transform: translate(-50%,-50%) scale(.35); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(100deg) scale(1.12); opacity: 0; } }
@keyframes magic-finger { 50% { transform: translate(-88px,-46px) rotate(-12deg); } }
@keyframes magic-hint-hide { 0%,76% { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .magic-glow, .magic-hint, .magic-hint b { animation: none; } }