/* The actor moves independently; its original column stays in the layout. */
.ghost-actor{--ghost-health-top:-57px;position:relative;width:67.32%;margin-inline:auto;aspect-ratio:388/394;transform:translate(var(--flight-x,0px),var(--flight-y,0px));z-index:20;pointer-events:auto;cursor:pointer;user-select:none;touch-action:manipulation;will-change:transform}
.ghost-actor .ada-image{width:100%;height:100%;object-fit:contain;transform:none}
.ghost-actor .ghost-health{pointer-events:none}
.ghost-lock{position:absolute;left:63%;top:43%;z-index:4;display:block;width:26px;height:30px;padding:0;border:0;background:transparent;box-shadow:none;pointer-events:none}
.ghost-lock svg{display:block;width:100%;height:100%;fill:#171717}
.ghost-actor:focus-visible{outline:2px dashed #555;outline-offset:4px}
.ghost-actor::after{content:'';position:absolute;z-index:-1;top:var(--shadow-top,86.8%);left:var(--shadow-left,50%);width:var(--shadow-width,55%);height:6%;min-height:5px;background:rgba(0,0,0,.58);transform:translateX(-50%);clip-path:polygon(20% 0,80% 0,80% 16%,92% 16%,92% 33%,100% 33%,100% 67%,92% 67%,92% 84%,80% 84%,80% 100%,20% 100%,20% 84%,8% 84%,8% 67%,0 67%,0 33%,8% 33%,8% 16%,20% 16%);pointer-events:none}
.ghost-actor > .ghost-health{position:absolute;top:var(--ghost-health-top);left:50%;transform:translateX(-50%)}

.ghost-controls{position:relative;z-index:11;display:grid;grid-template-columns:repeat(3,36px);grid-template-rows:repeat(2,36px);gap:5px;justify-content:center;margin:16px auto 0;width:max-content;touch-action:none;user-select:none}
.ghost-controls button{display:grid;place-items:center;width:36px;height:36px;padding:0 0 3px;border:2px solid #111;border-radius:3px;background:linear-gradient(#fff 0 72%,#d3d3d3 72%);color:#111;box-shadow:0 3px 0 #111,inset 2px 2px 0 #fff,inset -2px -4px 0 #aaa;font:16px/1 var(--ui-font);cursor:pointer;touch-action:none}
.ghost-controls [data-direction=up]{grid-column:2;grid-row:1}
.ghost-controls [data-direction=left]{grid-column:1;grid-row:2}
.ghost-controls [data-direction=right]{grid-column:3;grid-row:2}
.ghost-controls [data-direction=down]{grid-column:2;grid-row:2}
#ghostHome{margin-top:8px;padding:3px 5px;border:0;border-bottom:1px solid #aaa;background:none;color:#777;font:14px/1.5 var(--ui-font);cursor:pointer}
.ghost-controls button.is-held,.ghost-controls button:active{background:#ddd;box-shadow:inset 1px 1px 0 #aaa;transform:translateY(3px);padding-bottom:0}
.ghost-help{margin:9px 0 0;text-align:center;color:#777;font:14px/1.5 var(--ui-font)}



/* Keep the lock beside the forward hand when the sprite faces left. */
.ghost-actor[data-facing="left"] .ghost-lock{left:37%;transform:translateX(-100%)}

.ghost-name{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;color:var(--ink);font:16px/1.2 var(--ui-font);text-align:center}

.ghost-actor > .ghost-health{transform:translateX(-50%) scale(.85);transform-origin:50% 100%}

/* The anchor stays in the console; the actor keeps its position on the page. */
.ghost-anchor{width:67.32%;margin-inline:auto;aspect-ratio:388/394;pointer-events:none}
.ghost-layer{position:absolute;top:0;left:0;z-index:20;pointer-events:none;will-change:transform}
.ghost-layer .ghost-actor{position:relative;margin:0;transform-origin:0 0;pointer-events:auto;touch-action:none;--ghost-health-top:-57px}
.ghost-layer .ada-image{transform:none;transition:filter 250ms steps(4,end)}

.ghost-layer .ghost-actor.ghost-awaken .ada-image{animation:ghost-awaken 1.1s steps(5,end) 1}
.ghost-layer .ghost-actor.secret-unlocked .ada-image{animation:secret-burst 1s steps(4,end) 1}

.ghost-dance-visual{position:relative;width:100%;height:100%;transform-origin:50% 82%}
.ghost-actor.is-dancing .ghost-dance-visual{animation:ghost-dance-sway 1.8s steps(12,end) infinite}
.ghost-actor.is-dancing::after{animation:ghost-dance-shadow 1.8s steps(12,end) infinite}
@keyframes ghost-dance-sway{
 0%,12%,100%{transform:translate(-4px,1px) rotate(-4deg) scale(1.01,.99)}
 25%{transform:translate(0,-3px) rotate(-1deg) scale(.995,1.01)}
 38%{transform:translate(4px,0) rotate(3deg)}
 50%,62%{transform:translate(4px,1px) rotate(4deg) scale(1.01,.99)}
 75%{transform:translate(0,-3px) rotate(1deg) scale(.995,1.01)}
 88%{transform:translate(-4px,0) rotate(-3deg)}
}
@keyframes ghost-dance-shadow{
 0%,12%,100%{transform:translateX(calc(-50% - 3px)) scaleX(1);opacity:1}
 25%,75%{transform:translateX(-50%) scaleX(.95);opacity:.88}
 50%,62%{transform:translateX(calc(-50% + 3px)) scaleX(1);opacity:1}
}
@media(prefers-reduced-motion:reduce){.ghost-actor.is-dancing .ghost-dance-visual,.ghost-actor.is-dancing::after{animation:none}}