:root{
  --black:#000;
  --ink:#050607;
  --yellow:#ffd400;
  --white:#fff;
  --muted:#aab0b5;
  --line:rgba(255,255,255,.12);
  --font-display:"Luckiest Guy",Impact,"Arial Black",sans-serif;
  --font-body:"Nunito",Arial,sans-serif;
}
*{box-sizing:border-box}
html{background:#000;scroll-behavior:smooth}
body{margin:0;background:#000;color:#fff;font-family:var(--font-body);overflow-x:hidden}
body.intro-lock{overflow:hidden}
a{text-decoration:none;color:inherit}
button{font:inherit}
img{display:block}

/* ========================= INTRO ========================= */
.intro{position:fixed;inset:0;z-index:9999;background:#000;overflow:hidden;display:grid;place-items:center;transition:opacity .28s ease,visibility .28s ease}
.intro.done{opacity:0;visibility:hidden;pointer-events:none}
.intro-canvas{position:absolute;inset:0;width:100%;height:100%}
.typing-scene,.cross-scene{position:absolute;inset:0;display:grid;place-items:center}
.typing-scene{z-index:5}
.typing-line{font-family:var(--font-body);font-size:clamp(28px,4.15vw,72px);font-weight:900;letter-spacing:.025em;line-height:1.08;white-space:nowrap;text-align:center;text-transform:none;text-shadow:0 6px 22px rgba(0,0,0,.9)}
.typing-line .normal{color:#fff;-webkit-text-stroke:1px rgba(255,255,255,.62);paint-order:stroke fill;text-shadow:0 3px 0 #000,0 6px 18px rgba(0,0,0,.96)}
.typing-line .god{position:relative;color:#fff6c7;-webkit-text-stroke:1.35px #ffe66d;paint-order:stroke fill;text-shadow:0 3px 0 #000,0 0 5px rgba(255,248,205,.95),0 0 11px rgba(255,228,102,.72),0 0 22px rgba(255,215,64,.42);animation:godPulse .95s ease-in-out infinite alternate}
.typing-line::after{content:"";display:inline-block;width:4px;height:.95em;background:#fff;margin-left:8px;vertical-align:-5px;box-shadow:0 0 12px #fff;animation:caret .55s steps(1) infinite}
.fake-pointer{position:absolute;z-index:7;width:36px;height:48px;left:63%;top:56%;opacity:0;filter:drop-shadow(0 4px 7px #000)}
.fake-pointer svg{width:100%;height:100%;fill:#fff;stroke:#000;stroke-width:1.4}

.cross-scene{z-index:4;opacity:0;transform:scale(.82);transition:opacity .48s ease,transform .72s cubic-bezier(.15,.85,.18,1)}
.cross-scene.show{opacity:1;transform:scale(1)}
.cross3d{position:relative;width:260px;height:350px;transform-style:preserve-3d;animation:crossFloat 2.2s ease-in-out infinite alternate}
.cross-v,.cross-h{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateZ(24px);background:linear-gradient(90deg,#eee,#fff 28%,#fff 65%,#e9e9e9);border-radius:7px;box-shadow:0 0 12px #fff,0 0 38px #fff,0 0 95px rgba(255,255,255,.98),0 0 210px rgba(255,255,255,.47)}
.cross-v{width:54px;height:286px}
.cross-h{width:198px;height:54px;top:39%}
.cross-core{position:absolute;left:50%;top:39%;width:78px;height:78px;transform:translate(-50%,-50%) translateZ(32px);background:#fff;border-radius:50%;filter:blur(10px);box-shadow:0 0 80px 38px #fff}
.halo,.ray-field{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;mix-blend-mode:screen}
.halo-a{width:460px;height:460px;background:radial-gradient(circle,#fff 0 2%,rgba(255,255,255,.58) 9%,rgba(255,255,255,.18) 28%,transparent 68%);filter:blur(3px);animation:haloPulse 1.15s ease-in-out infinite alternate}
.halo-b{width:860px;height:860px;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%);filter:blur(6px);animation:haloPulse 1.7s ease-in-out infinite alternate-reverse}
.ray-field-a{width:1400px;height:1400px;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.32) 0 1deg,transparent 1deg 8deg);opacity:.37;animation:rays 16s linear infinite}
.ray-field-b{width:1000px;height:1000px;background:repeating-conic-gradient(from 5deg,rgba(255,255,255,.19) 0 2deg,transparent 2deg 17deg);opacity:.36;animation:rays 11s linear infinite reverse}
.light-star{position:absolute;left:50%;top:50%;width:14px;height:14px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:0 0 42px 18px #fff,0 0 130px 62px rgba(255,255,255,.64);opacity:0}
.cross-scene.charge .light-star{animation:charge 1.15s ease forwards}
.white-transition{position:absolute;z-index:8;left:50%;top:50%;width:10px;height:10px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;opacity:0;box-shadow:0 0 55px 28px #fff}
.white-transition.go{animation:whiteBurst 1.16s cubic-bezier(.08,.68,.1,1) forwards}
@keyframes caret{50%{opacity:0}}
@keyframes godPulse{from{filter:brightness(1);transform:scale(1)}to{filter:brightness(1.22);transform:scale(1.018)}}
@keyframes crossFloat{from{transform:perspective(900px) rotateY(-5deg) rotateX(2deg)}to{transform:perspective(900px) rotateY(5deg) rotateX(-2deg)}}
@keyframes haloPulse{from{transform:translate(-50%,-50%) scale(.9);opacity:.66}to{transform:translate(-50%,-50%) scale(1.1);opacity:1}}
@keyframes rays{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes charge{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}45%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) scale(4)}}
@keyframes whiteBurst{0%{opacity:.25;transform:translate(-50%,-50%) scale(.15)}24%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) scale(310)}}

/* ========================= SITE ========================= */
.site{opacity:0;filter:brightness(1.75);transform:scale(.997);transition:opacity .42s ease,filter .75s ease,transform .75s ease}
.site.ready{opacity:1;filter:none;transform:none}
.topbar{height:70px;display:flex;align-items:center;gap:28px;padding:0 clamp(18px,4vw,64px);background:rgba(2,3,4,.96);border-bottom:1px solid rgba(255,255,255,.08);position:relative;z-index:60;backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;min-width:190px;font-family:var(--font-display);color:var(--yellow);transform:rotate(-2.5deg);letter-spacing:.02em}
.mini-crown{font-size:23px;margin-right:8px}
.brand strong{font-size:25px}
.nav{display:flex;align-items:center;gap:clamp(20px,2.6vw,42px);margin:auto}
.nav a{position:relative;padding:25px 0 21px;font-weight:900;font-size:13px;transition:.18s}
.nav a::after{content:"";position:absolute;left:50%;bottom:11px;width:0;height:3px;border-radius:999px;background:var(--yellow);transform:translateX(-50%);transition:.18s}
.nav a:hover,.nav a.active{color:var(--yellow)}
.nav a:hover::after,.nav a.active::after{width:100%}
.socials{display:flex;gap:10px}
.social{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-weight:1000;font-size:16px;box-shadow:0 7px 18px rgba(0,0,0,.25);transition:.18s transform,.18s filter}
.social:hover{transform:translateY(-3px) rotate(-3deg);filter:brightness(1.12)}
.social-fb{background:#1877f2}.social-ig{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}.social-yt{background:#ff0033}.social-tt{background:#0b0b0d;border:1px solid #333}
.menu-toggle{display:none;border:0;background:transparent;padding:8px;margin-left:auto}.menu-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px;border-radius:3px}

/* ========================= HERO / APPROVED ART ========================= */
.hero{background:#000;overflow:hidden}
.scene-frame{position:relative;width:100%;max-width:1536px;margin:0 auto;background:#000;overflow:hidden;isolation:isolate}
.scene-base,.motion-layer{width:100%;height:auto;display:block;user-select:none;-webkit-user-drag:none}
.scene-base{position:relative;z-index:1}
.motion-layer{position:absolute;inset:0;z-index:3;pointer-events:none;will-change:transform,filter}
/* Localized duplicate-image layers. Each clip isolates only a tiny character area. */
.cat-face{clip-path:polygon(27% 25%,39% 20%,48% 28%,48% 54%,35% 57%,27% 43%);animation:catIdle 7.4s ease-in-out infinite}
.duck-head{clip-path:polygon(55% 21%,72% 19%,74% 57%,59% 60%,54% 42%);animation:duckIdle 8.1s ease-in-out infinite}
.dog-head{clip-path:polygon(45% 5%,67% 4%,70% 34%,49% 37%);animation:dogIdle 9.7s ease-in-out infinite}
.parrot-layer{clip-path:polygon(73% 13%,88% 8%,92% 45%,77% 50%);animation:parrotIdle 6.8s ease-in-out infinite}
@keyframes catIdle{0%,88%,100%{transform:none}91%{transform:translate(-1px,1px) rotate(-.25deg)}94%{transform:translate(1px,-1px) rotate(.25deg)}}
@keyframes duckIdle{0%,84%,100%{transform:none}88%{transform:translateY(-2px) rotate(.3deg)}93%{transform:translateY(1px) rotate(-.2deg)}}
@keyframes dogIdle{0%,86%,100%{transform:none}90%{transform:translateY(1px) scale(1.002)}94%{transform:translateY(-1px)}}
@keyframes parrotIdle{0%,82%,100%{transform:none}87%{transform:rotate(.35deg) translateY(-1px)}92%{transform:rotate(-.25deg)}}

.ambient-shimmer{position:absolute;z-index:2;inset:-20%;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.035) 49%,rgba(255,215,80,.08) 50%,transparent 57%);animation:ambientSweep 8s ease-in-out infinite}
@keyframes ambientSweep{0%,20%{transform:translateX(-55%)}65%,100%{transform:translateX(55%)}}
.robot-eyes{position:absolute;z-index:5;right:11.6%;top:54.5%;width:7.1%;height:10%;pointer-events:none;display:flex;justify-content:space-around;align-items:center;opacity:.84}
.robot-eyes i{width:19%;aspect-ratio:1;border-radius:50%;background:#78efff;box-shadow:0 0 8px #78efff,0 0 18px #39dfff,0 0 30px rgba(57,223,255,.6);animation:robotGlow 2.7s ease-in-out infinite alternate}
@keyframes robotGlow{from{filter:brightness(.8);transform:scale(.94)}to{filter:brightness(1.25);transform:scale(1.05)}}

/* TABLET */
.tablet-wrap{position:absolute;z-index:15;left:52.3%;top:51.4%;width:20.2%;transform:translate(-50%,-50%);perspective:1100px;filter:drop-shadow(0 24px 32px rgba(0,0,0,.58))}
.tablet{position:relative;width:100%;aspect-ratio:.73;border-radius:clamp(12px,1.2vw,24px);padding:4.7%;background:linear-gradient(145deg,#343943,#08090b 42%,#16191e 80%);border:1px solid rgba(255,255,255,.25);box-shadow:inset 0 0 0 2px rgba(0,0,0,.8),inset 0 0 22px rgba(255,255,255,.08),0 0 0 1px rgba(0,0,0,.8);transform-style:preserve-3d;transition:transform .16s ease}
.tablet-camera{position:absolute;z-index:4;top:1.3%;left:50%;width:3.2%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:#050505;box-shadow:inset 0 0 0 1px #333}
.tablet-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:clamp(8px,.8vw,17px);background:#0a0b0d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);touch-action:none}
.tablet-home{position:absolute;left:50%;bottom:1.25%;width:13%;height:1.2%;border-radius:999px;background:rgba(255,255,255,.28);transform:translateX(-50%)}
.video-player{position:absolute;inset:0;background:#050607;overflow:hidden}
.facebook-player{position:absolute;inset:-2%;width:104%;height:104%;border:0;background:#050607;opacity:0;transition:opacity .35s ease;z-index:2}
.facebook-player.loaded{opacity:1}
.video-loading{position:absolute;z-index:1;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;color:#fff;background:radial-gradient(circle at 50% 42%,#222a31,#07090b 70%);font-size:clamp(7px,.68vw,10px);letter-spacing:.12em}
.loader-ring{width:29px;height:29px;border:3px solid rgba(255,255,255,.18);border-top-color:#1877f2;border-radius:50%;animation:loaderSpin .8s linear infinite}
@keyframes loaderSpin{to{transform:rotate(360deg)}}
.video-meta{position:absolute;z-index:6;left:4%;right:4%;top:3.5%;display:flex;align-items:center;justify-content:center;min-height:52px;padding:8px 40px;border-radius:13px;background:linear-gradient(90deg,rgba(7,9,12,.84),rgba(28,34,43,.72),rgba(7,9,12,.84));border:1px solid rgba(255,255,255,.17);box-shadow:0 10px 30px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.05);pointer-events:none;text-shadow:0 2px 8px #000}
.meta-badge{position:absolute;left:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center}
.fb-mini{width:30px;height:30px;border-radius:8px;background:#1877f2;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(255,255,255,.24),0 0 16px rgba(24,119,242,.55)}
.fb-mini svg{width:72%;height:72%;fill:#fff;display:block}
.meta-platform{display:none}
.meta-copy{display:grid;justify-items:center;text-align:center;line-height:1.02;width:100%}
.views-title{font-size:clamp(10px,1.08vw,17px);letter-spacing:.065em;color:#fff7c7;font-weight:1000;text-align:center;text-shadow:0 0 4px #fff4b1,0 0 10px rgba(255,226,83,.88),0 0 22px rgba(255,205,48,.42)}
.video-title{margin-top:3px;font-size:clamp(5.7px,.5vw,8px);color:#f4f6f8;font-weight:900;letter-spacing:.09em;text-transform:uppercase;text-align:center}
.screen-gloss{position:absolute;z-index:8;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.12),transparent 22%,transparent 70%,rgba(255,255,255,.035));mix-blend-mode:screen}
.swipe-line{position:absolute;z-index:9;left:50%;top:50%;width:2px;height:55%;transform:translate(-50%,-50%);background:linear-gradient(transparent,#fff,transparent);opacity:0;filter:drop-shadow(0 0 7px #fff)}
.swipe-line.go-up{animation:swipeUp .55s ease}.swipe-line.go-down{animation:swipeDown .55s ease}
@keyframes swipeUp{0%{opacity:0;transform:translate(-50%,40%)}35%{opacity:.9}100%{opacity:0;transform:translate(-50%,-140%)}}
@keyframes swipeDown{0%{opacity:0;transform:translate(-50%,-140%)}35%{opacity:.9}100%{opacity:0;transform:translate(-50%,40%)}}

.switch-button{position:absolute;left:50%;transform:translateX(-50%);z-index:20;min-width:54px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(0,0,0,.68);color:#fff;backdrop-filter:blur(8px);display:flex;align-items:center;gap:5px;justify-content:center;padding:6px 10px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.25);transition:.18s}
.switch-button:hover{border-color:var(--yellow);color:var(--yellow);transform:translateX(-50%) scale(1.05)}
.switch-button span{font-size:17px;font-weight:1000}.switch-button small{font-size:6px;letter-spacing:.14em;font-weight:1000}
.switch-up{top:-13%}.switch-down{bottom:-13%}

.interaction-hint{position:absolute;z-index:18;left:52.3%;top:84.8%;transform:translateX(-50%);display:grid;text-align:center;gap:2px;padding:5px 11px;border-radius:999px;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);transition:.4s;pointer-events:none}
.interaction-hint strong{font-size:8px;color:var(--yellow);letter-spacing:.16em}.interaction-hint span{font-size:6px;letter-spacing:.06em;color:#d8dbde}.interaction-hint.hide{opacity:0;transform:translateX(-50%) translateY(8px)}

/* REALISTIC LIMB SPRITES
   These are transparent, feathered cut-outs from the exact approved artwork.
   No rectangular crop is moved on screen. */
.limb-sprite{position:absolute;z-index:17;pointer-events:none;opacity:1;will-change:transform,filter;transform:translateZ(0);filter:drop-shadow(0 3px 5px rgba(0,0,0,.18))}
.chato-paw-sprite{transform-origin:18% 72%}
.donald-wing-sprite{transform-origin:82% 48%}
.duck-wing-eraser{position:absolute;z-index:16;pointer-events:none;opacity:0;border-radius:52% 46% 54% 48%;background:radial-gradient(ellipse at 56% 46%,#474450 0 38%,#322f39 58%,rgba(28,27,33,.35) 73%,transparent 84%);filter:blur(.6px);transition:opacity .09s ease;transform:translateZ(0)}
.scene-frame.duck-changing .duck-wing-eraser{opacity:1}

.scene-frame.cat-changing .chato-paw-sprite{
  animation:chatoSwipe 1.36s cubic-bezier(.16,.76,.18,1);
}
.scene-frame.cat-changing .cat-face{
  animation:catReactReal 1.36s ease;
}
.scene-frame.duck-changing .donald-wing-sprite{
  animation:donaldSwipe 1.82s cubic-bezier(.16,.76,.18,1);
}
.scene-frame.duck-changing .duck-head{
  animation:duckReactReal 1.82s ease;
}

@keyframes chatoSwipe{
  0%,100%{transform:translate(0,0) rotate(0deg);filter:drop-shadow(0 3px 5px rgba(0,0,0,.18))}
  18%{transform:translate(1px,-1px) rotate(-1.2deg)}
  43%{transform:translate(7px,-7px) rotate(-3.6deg);filter:drop-shadow(0 4px 8px rgba(0,0,0,.25)) brightness(1.03)}
  62%{transform:translate(10px,-15px) rotate(-5.2deg);filter:drop-shadow(0 5px 10px rgba(0,0,0,.28)) brightness(1.06)}
  78%{transform:translate(4px,-6px) rotate(-2deg)}
}
@keyframes donaldSwipe{
  0%,100%{transform:translate(0,0) rotate(0deg) scaleX(1) scaleY(1)}
  12%{transform:translate(-2px,-1px) rotate(-1deg) scaleX(1.02)}
  32%{transform:translate(-17px,-3px) rotate(-3deg) scaleX(1.08) scaleY(.99)}
  50%{transform:translate(-31px,-6px) rotate(-5deg) scaleX(1.16) scaleY(.98);filter:brightness(1.06) drop-shadow(0 6px 10px rgba(0,0,0,.28))}
  67%{transform:translate(-34px,-27px) rotate(-7deg) scaleX(1.18) scaleY(.97);filter:brightness(1.10) drop-shadow(0 8px 14px rgba(0,0,0,.32))}
  78%{transform:translate(-28px,-42px) rotate(-8deg) scaleX(1.15) scaleY(.98)}
  90%{transform:translate(-9px,-12px) rotate(-2deg) scaleX(1.05)}
}
@keyframes catReactReal{
  0%,100%{transform:none}
  30%{transform:translate(1px,-1px) rotate(.18deg)}
  58%{transform:translate(2px,-2px) rotate(.32deg)}
}
@keyframes duckReactReal{
  0%,100%{transform:none}
  25%{transform:translate(-1px,-1px) rotate(-.25deg)}
  48%{transform:translate(-3px,-4px) rotate(-.55deg)}
  64%{transform:translate(-4px,-5px) rotate(-.8deg)}
}

.reaction-bubble{position:absolute;z-index:19;left:52%;top:30%;transform:translateX(-50%) scale(.88);padding:5px 9px;border-radius:999px;background:rgba(0,0,0,.68);border:1px solid rgba(255,255,255,.2);font-size:8px;font-weight:1000;letter-spacing:.1em;opacity:0;pointer-events:none}.reaction-bubble.show{animation:bubble 1.25s ease}@keyframes bubble{0%{opacity:0;transform:translateX(-50%) translateY(5px) scale(.85)}20%,70%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-6px) scale(.94)}}

/* Desktop cursor-reactive feel */
@media(pointer:fine){.scene-frame{cursor:default}}

/* ========================= RESPONSIVE ========================= */
@media(max-width:900px){
  .topbar{height:64px;padding:0 16px}.brand{min-width:auto}.brand strong{font-size:20px}.mini-crown{font-size:19px}
  .socials{display:none}.menu-toggle{display:block}
  .nav{position:absolute;top:64px;left:12px;right:12px;display:grid;gap:0;padding:9px;margin:0;border:1px solid var(--line);border-radius:14px;background:rgba(2,3,4,.98);opacity:0;visibility:hidden;transform:translateY(-10px);transition:.2s}.nav.open{opacity:1;visibility:visible;transform:none}.nav a{padding:12px 15px}.nav a::after{display:none}
}
@media(max-width:680px){
  .typing-line{font-size:clamp(24px,7vw,42px);letter-spacing:.035em;padding:0 14px;white-space:normal}.fake-pointer{left:72%;top:56%}
  .cross3d{width:190px;height:270px}.cross-v{height:215px;width:42px}.cross-h{width:150px;height:42px}
  /* Mobile zooms toward the tablet while preserving the same scene. */
  .scene-frame{height:calc(100svh - 64px);min-height:610px;max-width:none}
  .scene-frame::before{content:"";position:absolute;left:0;top:0;width:26%;height:23%;background:linear-gradient(90deg,#000 0 70%,rgba(0,0,0,.92) 88%,rgba(0,0,0,0) 100%),linear-gradient(180deg,#000 0 72%,rgba(0,0,0,.88) 90%,rgba(0,0,0,0) 100%);z-index:9;pointer-events:none}
  .scene-base,.motion-layer{position:absolute;width:auto;height:100%;max-width:none;left:50%;top:0;transform:translateX(-50%)}
  .motion-layer{inset:auto}
  .cat-face,.cat-paw,.duck-head,.dog-head,.parrot-layer{animation:none}
  .tablet-wrap{left:51%;top:55%;width:38%}
  .switch-button{padding:5px 8px}.switch-up{top:-12%}.switch-down{bottom:-12%}
  .interaction-hint{left:51%;top:86%;max-width:75%;white-space:nowrap}
  .robot-eyes{display:none}
}
@media(max-width:420px){.tablet-wrap{width:44%;top:56%}.interaction-hint{font-size:6px}}
@media(prefers-reduced-motion:reduce){
  .intro{display:none!important}.site{opacity:1!important;filter:none!important;transform:none!important}.motion-layer,.ambient-shimmer,.robot-eyes i{animation:none!important}
}

.scene-frame.cat-changing .tablet,
.scene-frame.duck-changing .tablet{
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.8),
    inset 0 0 22px rgba(255,255,255,.11),
    0 0 0 1px rgba(0,0,0,.8),
    0 0 26px rgba(79,181,255,.24);
}
.scene-frame.cat-changing .chato-paw-sprite,
.scene-frame.duck-changing .donald-wing-sprite{
  --screen-light: drop-shadow(0 0 8px rgba(115,205,255,.18));
}
.switch-button b{font:inherit;color:var(--yellow)}


/* ========================= SCREEN RUNNERS ========================= */
.screen-runners{position:fixed;inset:0;pointer-events:none;z-index:120;overflow:hidden}
.runner{position:absolute;left:0;top:0;width:104px;height:88px;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-drag:none;transform-origin:center center;will-change:transform;filter:drop-shadow(0 10px 15px rgba(0,0,0,.35))}
.runner img{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.runner-shadow{position:absolute;left:18%;right:18%;bottom:8px;height:13px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 55%,rgba(0,0,0,0) 100%);filter:blur(2px);opacity:.78;pointer-events:none}
.runner-bubble{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-8px) scale(.8);padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.78);border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 20px rgba(0,0,0,.2);font-size:10px;font-weight:1000;letter-spacing:.08em;white-space:nowrap;opacity:0;transition:opacity .18s ease,transform .18s ease;pointer-events:none}
.runner-bubble::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:6px solid transparent;border-top-color:rgba(0,0,0,.78)}
.runner.dragging .runner-bubble{opacity:1;transform:translate(-50%,-12px) scale(1)}
.runner-cat{width:118px;height:98px}
.runner-duck{width:108px;height:92px}
.runner-cat img{transform-origin:50% 78%}
.runner-duck img{transform-origin:50% 82%}
.runner::before{content:"";position:absolute;inset:-12px;border-radius:24px;background:radial-gradient(circle at center,rgba(255,212,0,.08),rgba(255,212,0,0) 65%);opacity:0;transition:opacity .2s ease;pointer-events:none}
.runner:hover::before,.runner.dragging::before{opacity:1}
@media(max-width:680px){
  .runner-cat{width:88px;height:74px}.runner-duck{width:80px;height:68px}
  .runner-bubble{font-size:8px;padding:4px 7px}
}

.runner.dragging{filter:drop-shadow(0 12px 18px rgba(0,0,0,.42)) drop-shadow(0 0 8px rgba(255,212,0,.22))}

/* ========================= RUNNERS V6 — personajes propios animados ========================= */
.runner{width:126px;height:98px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.38))}
.runner-cat{width:128px;height:102px}
.runner-duck{width:118px;height:96px}
.runner-art{width:100%;height:100%;overflow:visible;pointer-events:none;transform-origin:50% 75%;display:block}
.runner-shadow{bottom:4px;height:11px;left:20%;right:20%;opacity:.64;filter:blur(3px)}
.runner:hover::before,.runner.dragging::before{opacity:0.95}
.runner.dragging .runner-art{filter:drop-shadow(0 0 14px rgba(255,212,0,.18))}

.runner-cat-art .cat-body{transform-origin:112px 98px;animation:catBodyBounce .36s infinite ease-in-out alternate}
.runner-cat-art .cat-head{transform-origin:131px 81px;animation:catHeadNod .36s infinite ease-in-out alternate}
.runner-cat-art .cat-tail{transform-origin:58px 98px;animation:catTailSwish .32s infinite ease-in-out alternate}
.runner-cat-art .leg-front-a{transform-origin:153px 112px;animation:catLegA .24s infinite linear alternate}
.runner-cat-art .leg-front-b{transform-origin:163px 110px;animation:catLegB .24s infinite linear alternate}
.runner-cat-art .leg-back-a{transform-origin:92px 114px;animation:catLegB .24s infinite linear alternate}
.runner-cat-art .leg-back-b{transform-origin:117px 114px;animation:catLegA .24s infinite linear alternate}

.runner-duck-art .duck-body{transform-origin:109px 99px;animation:duckBodyBounce .34s infinite ease-in-out alternate}
.runner-duck-art .duck-neck-head{transform-origin:144px 75px;animation:duckHeadBop .34s infinite ease-in-out alternate}
.runner-duck-art .duck-wing{transform-origin:101px 102px;animation:duckWingFlap .22s infinite ease-in-out alternate}
.runner-duck-art .duck-chase-wing{transform-origin:72px 110px;animation:duckChaseWing .22s infinite ease-in-out alternate}
.runner-duck-art .duck-leg-a{transform-origin:100px 112px;animation:duckLegA .18s infinite linear alternate}
.runner-duck-art .duck-leg-b{transform-origin:129px 112px;animation:duckLegB .18s infinite linear alternate}
.runner-duck-art .duck-cap{transform-origin:146px 42px;animation:duckCapBop .34s infinite ease-in-out alternate}

.runner.dragging .runner-cat-art .cat-tail,
.runner.dragging .runner-cat-art .cat-head,
.runner.dragging .runner-duck-art .duck-wing,
.runner.dragging .runner-duck-art .duck-neck-head{animation-duration:.12s}

@keyframes catBodyBounce{from{transform:translateY(2px) rotate(-1.5deg)}to{transform:translateY(-4px) rotate(1deg)}}
@keyframes catHeadNod{from{transform:translateY(1px) rotate(-2deg)}to{transform:translateY(-3px) rotate(2deg)}}
@keyframes catTailSwish{from{transform:rotate(12deg)}to{transform:rotate(-15deg)}}
@keyframes catLegA{from{transform:rotate(14deg) translateY(1px)}to{transform:rotate(-14deg) translateY(-1px)}}
@keyframes catLegB{from{transform:rotate(-12deg) translateY(-1px)}to{transform:rotate(14deg) translateY(1px)}}
@keyframes duckBodyBounce{from{transform:translateY(2px) rotate(-1deg)}to{transform:translateY(-3px) rotate(1deg)}}
@keyframes duckHeadBop{from{transform:translateY(2px) rotate(-3deg)}to{transform:translateY(-3px) rotate(3deg)}}
@keyframes duckWingFlap{from{transform:rotate(-10deg) translateY(1px)}to{transform:rotate(10deg) translateY(-2px)}}
@keyframes duckChaseWing{from{transform:rotate(-18deg)}to{transform:rotate(16deg)}}
@keyframes duckLegA{from{transform:rotate(17deg)}to{transform:rotate(-14deg)}}
@keyframes duckLegB{from{transform:rotate(-14deg)}to{transform:rotate(17deg)}}
@keyframes duckCapBop{from{transform:translateY(0)}to{transform:translateY(-1px)}}

@media(max-width:680px){
  .runner-cat{width:96px;height:78px}
  .runner-duck{width:88px;height:72px}
}