/* Layout for the ibex figures on progress bars, the "Play" bubble and the Ibex Leap game window (ibex.js). */
.px-on{display:inline-block;line-height:0;vertical-align:middle}
.px-canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges}

/* The logo: pixels fly between shapes. */
.px-logo{display:block;width:24px;height:24px;overflow:visible}
.px-logo rect{fill:currentColor;transition:transform .75s cubic-bezier(.55,0,.2,1.25),opacity .45s ease;transform-box:view-box}

/* The crew on the sign-in pages: each one hops / floats in its own rhythm. */
.px-crew{display:flex;align-items:flex-end;gap:14px;margin-top:26px;flex-wrap:wrap}
.px-crew .px-on{filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.px-crew .px-rostam{animation:px-hop 1.6s ease-in-out infinite}
.px-crew .px-rakhsh{animation:px-hop 1.1s ease-in-out .2s infinite}
.px-crew .px-div{animation:px-squish 1.3s ease-in-out infinite;transform-origin:50% 100%}
.px-crew .px-simorgh{animation:px-float 2.4s ease-in-out infinite}
.px-crew .px-gordafarid{animation:px-hop 2s ease-in-out .6s infinite}
.px-crew .px-zal{animation:px-twirl 3.4s ease-in-out infinite}
@keyframes px-hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-12px)}55%{transform:translateY(-12px)}}
@keyframes px-squish{0%,100%{transform:scale(1,1)}50%{transform:scale(1.12,.86)}}
@keyframes px-twirl{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(8deg) scale(1.08)}}
@keyframes px-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.px-wave-hi{display:inline-flex;align-items:center;gap:10px}

/* Empty screens */
.px-empty{display:inline-block;margin-bottom:12px;animation:px-float 2.8s ease-in-out infinite}
.px-empty .px-canvas{filter:drop-shadow(0 8px 14px rgba(0,0,0,.3))}

/* Pixo running along a progress bar, and the game button */
.px-lane{position:relative;height:34px;margin:2px 0 -2px}
.px-runner{position:absolute;bottom:0;left:0;transition:left 1s linear}
.px-play{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 12px;border-radius:999px;border:1px solid rgba(var(--accent-rgb),.45);
 background:var(--grad-soft);color:var(--text-strong);font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:transform .15s,background .15s}
.px-play:hover{transform:translateY(-1px);background:rgba(var(--accent-rgb),.2)}

/* Pixo cheering on a finished card */
.px-cheer{position:absolute;left:50%;bottom:10px;z-index:3;pointer-events:none;animation:px-cheer 2.6s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes px-cheer{0%{transform:translate(-50%,70px);opacity:0}18%{transform:translate(-50%,-6px);opacity:1}30%,50%,70%{transform:translate(-50%,0)}40%,60%{transform:translate(-50%,-14px)}85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,40px)}}

/* Sleeping Pixo (locked page) */
.px-sleeping{position:relative;display:inline-block}
.px-sleeping::before,.px-sleeping::after{content:"z";position:absolute;top:-4px;right:-10px;font:800 16px/1 var(--display);color:#a78bfa;opacity:0;animation:px-z 2.4s ease-in infinite}
.px-sleeping::after{content:"Z";font-size:22px;animation-delay:1.2s}
@keyframes px-z{0%{opacity:0;transform:translate(0,0)}30%{opacity:1}100%{opacity:0;transform:translate(16px,-34px)}}

/* Pixo Run */
.px-game{position:fixed;inset:0;z-index:250;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.px-game.hidden{display:none}
.px-game-box{position:relative;width:min(700px,100%);padding:16px;border-radius:22px;background:var(--pop);border:1px solid var(--line-strong);box-shadow:0 30px 80px rgba(0,0,0,.6);color:var(--text)}
.px-game-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.px-game-head b{display:block;font:800 20px/1.2 var(--display);letter-spacing:.5px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.px-game-head small{color:var(--muted);font-size:12.5px}
.px-game-close{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--chip);color:var(--text);font-size:20px;line-height:1;cursor:pointer}
.px-game-canvas{display:block;width:100%;height:auto;border-radius:14px;image-rendering:pixelated;touch-action:manipulation;cursor:pointer;border:1px solid var(--line)}
.px-game-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--soft)}
.px-game-foot b{color:var(--accent);font-size:15px;font-variant-numeric:tabular-nums}
.px-game-foot small{margin-inline-start:auto;color:var(--muted)}
.px-game-ready{position:absolute;left:50%;top:70px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:var(--grad);color:var(--ink);font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:px-cheer-in .5s cubic-bezier(.2,1.4,.4,1)}
.px-game-ready.hidden{display:none}
.px-game-ready .btn{background:var(--ink);color:#fff}
@keyframes px-cheer-in{from{transform:translate(-50%,-20px) scale(.9);opacity:0}}

@media (prefers-reduced-motion:reduce){
 .px-crew .px-on,.px-empty,.px-cheer,.px-sleeping::before,.px-sleeping::after{animation:none!important}
 .px-runner,.px-logo rect{transition:none}
}

/* «نما» wordmark (wordmark.js) */
.nm-wordmark{display:inline-block;height:1em;width:auto;overflow:visible;vertical-align:-.1em}
.nm-wordmark .nm-spark{transform-box:fill-box;transform-origin:center;animation:wm-twinkle 4.2s ease-in-out infinite}
.nm-wordmark .nm-spark2{transform-box:fill-box;transform-origin:center;animation:wm-twinkle2 4.2s ease-in-out 1.4s infinite}
@keyframes wm-twinkle{0%,70%,100%{transform:rotate(0) scale(1)}80%{transform:rotate(45deg) scale(.78)}90%{transform:rotate(90deg) scale(1.12)}}
@keyframes wm-twinkle2{0%,60%,100%{opacity:1;transform:scale(1)}75%{opacity:.25;transform:scale(.5)}88%{opacity:1;transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.nm-wordmark :is(.nm-spark,.nm-spark2){animation:none}}

/* Mobile: no tap flash over the game window when tapping to jump, no text selection or zoom from fast taps */
.px-game,.px-game *{-webkit-tap-highlight-color:transparent}
.px-game-box,.px-game-canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.px-game-canvas{touch-action:none;outline:none}