/* mydaddyfriend.lol — amarillo, raro, sin propósito */

:root{
  --yellow:#ffe000;
  --ink:#14110f;
  --pink:#ff2e88;
  --lime:#b8ff3d;
  --comic:"Comic Sans MS","Comic Sans","Chalkboard SE","Marker Felt",system-ui,sans-serif;
  --open:1;
  --tilt:0deg;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:var(--comic);
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.55) 0 3px, transparent 4px) 0 0/34px 34px,
    radial-gradient(circle at 70% 62%, rgba(0,0,0,.06) 0 4px, transparent 5px) 0 0/47px 47px,
    var(--yellow);
  min-height:100vh;
  overflow-x:hidden;
  padding-bottom:2rem;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- ticker ---------- */
.ticker{
  background:var(--ink);color:var(--lime);
  border-bottom:5px solid var(--pink);
  overflow:hidden;white-space:nowrap;
  font-size:.82rem;letter-spacing:.06em;
  padding:.35rem 0;position:relative;z-index:6;
}
.ticker__track{display:inline-flex;animation:slide 34s linear infinite}
.ticker__track span{padding-right:2rem}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- header ---------- */
.top{text-align:center;padding:1.1rem .8rem .3rem;position:relative;z-index:2}

.live{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--ink);color:#fff;
  font-size:.7rem;letter-spacing:.18em;
  padding:.2rem .6rem;border-radius:999px;margin-bottom:.5rem;
}
.live i{width:.5rem;height:.5rem;border-radius:50%;background:#ff2d2d;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}

.logo{
  margin:0;font-size:clamp(2.1rem,10vw,3.6rem);line-height:.95;
  letter-spacing:-.02em;color:#fff;
  text-shadow:3px 3px 0 var(--ink),6px 6px 0 var(--pink);
  transform:rotate(-1.5deg);animation:wobble 5s ease-in-out infinite;
}
.logo em{font-style:normal;color:var(--pink);text-shadow:3px 3px 0 var(--ink),6px 6px 0 #fff}
.logo b{font-size:.5em;color:var(--lime);text-shadow:2px 2px 0 var(--ink)}
@keyframes wobble{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg) scale(1.02)}}

.tagline{
  margin:.6rem auto 0;max-width:36ch;font-size:.95rem;
  background:#fff;display:inline-block;
  padding:.25rem .7rem;border:3px solid var(--ink);
  transform:rotate(.8deg);box-shadow:4px 4px 0 var(--ink);
}

/* ---------- layout ---------- */
.main{
  max-width:520px;margin:0 auto;padding:1rem 1rem 0;
  display:flex;flex-direction:column;align-items:center;
  position:relative;z-index:2;
}

/* ---------- globo de diálogo ---------- */
/* va dentro del escenario, arriba a la derecha: no reserva alto propio */
.bubble{
  position:absolute;right:-2%;top:15%;z-index:6;
  max-width:66%;pointer-events:none;
  background:#fff;
  border:4px solid var(--ink);border-radius:22px;
  padding:.5rem 1rem .6rem;
  font-size:clamp(1.05rem,5vw,1.6rem);line-height:1.05;
  text-align:center;
  box-shadow:5px 5px 0 var(--pink);
  transform:scale(0) rotate(var(--rot,-3deg));
  transform-origin:50% 110%;opacity:0;
  transition:transform .16s cubic-bezier(.2,1.7,.5,1),opacity .16s;
}
.bubble::after{content:"";position:absolute;left:22%;bottom:-20px;border:10px solid transparent;border-top-color:var(--ink)}
.bubble::before{content:"";position:absolute;left:22%;bottom:-13px;z-index:1;border:10px solid transparent;border-top-color:#fff}
.bubble.show{opacity:1;transform:scale(1) rotate(var(--rot,-3deg))}

/* ---------- escenario ---------- */
.stagewrap{width:100%;display:flex;justify-content:center;overflow-x:clip;overflow-y:visible}

.stage{
  position:relative;
  width:min(84vw,320px);
  aspect-ratio:360/764;
  margin:.2rem auto 0;
  --tilt:0deg;
  /* estos tres los pisa el JS con los colores de la foto */
  --skin-body:#e8b189;
  --skin-shade:#c88a61;
  --hair:#2c1c15;
  --hair-hi:#4d3327;
}
.sunburst{
  position:absolute;left:50%;top:34%;width:200%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.6) 0deg 9deg,transparent 9deg 18deg);
  border-radius:50%;animation:spin 44s linear infinite;z-index:0;
  -webkit-mask-image:radial-gradient(circle,#000 30%,transparent 72%);
  mask-image:radial-gradient(circle,#000 30%,transparent 72%);
}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* El aura: crece y se enciende con el rango. Es lo que hace que un muñeco de nivel
   alto se vea distinto de uno recién hecho antes de leer un solo número.
   Lleva su propio color, no el del texto: sobre el amarillo del fondo, el dorado de
   LEGEND e IMMORTAL desaparece. Esos dos se resuelven cambiando el fondo. */
.aura{
  position:absolute;left:50%;top:36%;width:0;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,var(--aura,#fff) 0%,transparent 68%);
  opacity:0;z-index:0;pointer-events:none;
  transition:width .6s ease,opacity .6s ease;
}
.stage[data-rank="good"]   .aura{--aura:#4ec24e;width:62%;opacity:.16}
.stage[data-rank="sub"]    .aura{--aura:#0fb6ff;width:78%;opacity:.24}
.stage[data-rank="brat"]   .aura{--aura:#8a1fff;width:88%;opacity:.30}
.stage[data-rank="pain"]   .aura{--aura:#ff1f1f;width:96%;opacity:.34}
.stage[data-rank="fav"]    .aura{--aura:#ff0f78;width:104%;opacity:.40;animation:auraBeat 2.4s ease-in-out infinite}
.stage[data-rank="legend"] .aura{--aura:#ffffff;width:112%;opacity:.66;animation:auraBeat 1.8s ease-in-out infinite}
.stage[data-rank="god"]    .aura{--aura:#140f0a;width:128%;opacity:.58;animation:auraBeat 1.1s ease-in-out infinite}
@keyframes auraBeat{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.09)}}

/* El sol de fondo acelera con el rango, y en los dos últimos cambia de color: es lo
   único que hace que un muñeco de nivel 100 se vea en OTRO escenario, no en el mismo
   con un número más alto. */
.stage[data-rank="pain"]   .sunburst{animation-duration:30s}
.stage[data-rank="fav"]    .sunburst{animation-duration:22s}
.stage[data-rank="legend"] .sunburst{
  animation-duration:15s;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.96) 0deg 9deg,transparent 9deg 18deg);
}
.stage[data-rank="god"] .sunburst{
  animation-duration:8s;
  background:repeating-conic-gradient(from 0deg,rgba(16,12,8,.72) 0deg 7deg,rgba(255,200,0,.5) 7deg 9deg,transparent 9deg 18deg);
}

/* ---------- cartel de nombre estilo videojuego ---------- */
.nametag{
  position:absolute;left:0;right:0;top:0;height:8%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:.28rem;z-index:4;
}
.nametag__row{display:flex;align-items:center;gap:.3rem}
.nametag__lvl{
  font-size:.6rem;letter-spacing:.05em;color:#0e0e12;
  background:var(--rank,var(--lime));border:2px solid #0e0e12;border-radius:4px;
  padding:.02rem .25rem;line-height:1.25;
  transition:background .3s;
}
.nametag__input{
  font:inherit;font-size:clamp(1rem,4.4vw,1.45rem);line-height:1.1;
  text-transform:uppercase;text-align:center;
  border:0;background:transparent;outline:0;padding:0;
  color:#fff;width:min(58vw,11ch);cursor:text;
  -webkit-text-stroke:3px #0e0e12;
  paint-order:stroke fill;
  text-shadow:0 2px 0 #0e0e12,2px 0 0 #0e0e12,-2px 0 0 #0e0e12,0 -2px 0 #0e0e12,0 4px 7px rgba(0,0,0,.35);
}
.nametag__input::placeholder{color:#fff;opacity:.85;font-size:.6em;letter-spacing:.05em}
.nametag__input:placeholder-shown{border-bottom:2px dashed rgba(0,0,0,.5)}
.nametag__input:focus{border-bottom:2px solid var(--pink)}
.nametag__pen{font-size:.8rem;opacity:.3;transition:opacity .2s}
.nametag__input:placeholder-shown+.nametag__pen{opacity:1;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px) rotate(-12deg)}}
.nametag__bar{
  width:30%;height:8px;background:rgba(0,0,0,.35);
  border:2px solid #0e0e12;border-radius:5px;overflow:hidden;
}
.nametag__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--rank,#ffd93d));transition:width .25s}

.nametag__rank{
  font-size:.62rem;letter-spacing:.14em;line-height:1;
  color:var(--rank,#fff);
  -webkit-text-stroke:2.5px #0e0e12;paint-order:stroke fill;
  text-shadow:0 2px 0 #0e0e12,0 3px 6px rgba(0,0,0,.4);
  transition:color .3s;
}
/* de acá para arriba el rango late: es la señal de que ya no es un muñeco cualquiera */
.stage[data-rank="fav"] .nametag__rank,
.stage[data-rank="legend"] .nametag__rank{animation:rankPulse 1.6s ease-in-out infinite}
.stage[data-rank="god"] .nametag__rank{animation:rankPulse .9s ease-in-out infinite}
@keyframes rankPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}

/* ---------- el personaje ---------- */
.guy{
  position:absolute;inset:0;
  border:0;padding:0;margin:0;background:none;
  cursor:pointer;touch-action:manipulation;z-index:1;
  transform:rotate(var(--tilt));
  animation:idle 4.5s ease-in-out infinite;
}
.guy:focus-visible{outline:4px dashed var(--ink);outline-offset:6px;border-radius:14px}
@keyframes idle{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-6px) rotate(.4deg)}}

.avatar{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.avatar--front{pointer-events:none;z-index:3}

.ground{fill:rgba(0,0,0,.15)}
.skin{fill:var(--skin-body);stroke:#1a1114;stroke-width:5;stroke-linejoin:round}
.skin-soft{fill:var(--skin-body)}
.shade{fill:var(--skin-shade);opacity:.4}
.ear{fill:var(--skin-body);stroke:#1a1114;stroke-width:5}
.ink{fill:none;stroke:#1a1114;stroke-linecap:round;stroke-width:30}
.limb{fill:none;stroke:var(--skin-body);stroke-linecap:round;stroke-width:22}
.ink-thin{fill:none;stroke:#1a1114;stroke-width:4;stroke-linecap:round;opacity:.45}

.hair{fill:var(--hair)}
.hair-hi{fill:var(--hair-hi);opacity:.5}
.band{fill:none;stroke:#141118;stroke-width:9;stroke-linecap:round}
.ear-cat{fill:#141118;stroke:#141118;stroke-width:10;stroke-linejoin:round}
.ear-in{fill:#ff6f9c;opacity:.8}

.strap{fill:none;stroke:#141118;stroke-width:7;stroke-linecap:round}
.lace{fill:url(#lace);stroke:#141118;stroke-width:3;stroke-linejoin:round}
.choker{fill:#141118}
.ring{fill:none;stroke:#cfcfda;stroke-width:3.5}
.stocking{fill:none;stroke:url(#stockg);stroke-linecap:round;opacity:.93}
.stocking-band{fill:none;stroke:#4b4b59;stroke-linecap:butt}
.stocking-foot{fill:#17171d;opacity:.9}
.handle{fill:#141118}
.handle-tip{fill:#9a9aa6}
.grip{fill:#2b2b36}
.lash{fill:none;stroke:#17111a;stroke-linecap:round}
.lash--1{stroke-width:9}
.lash--2{stroke-width:6}
.lash--3{stroke-width:3}

/* el látigo pivotea desde el hombro; el viewBox arranca en y=-84, por eso el +84 */
.whip{transform-box:view-box;transform-origin:221px 310px}
.is-moan .whip{animation:crack .42s ease-out}
@keyframes crack{
  0%{transform:rotate(0)}
  28%{transform:rotate(-22deg)}
  56%{transform:rotate(11deg)}
  100%{transform:rotate(0)}
}

/* ---------- la cara recortada ---------- */
.head{position:absolute;z-index:2}

/* ---------- poses ---------- */
.pose{display:none}
.stage[data-pose="stand"] .pose[data-pose="stand"],
.stage[data-pose="kneel"] .pose[data-pose="kneel"],
.stage[data-pose="lying"] .pose[data-pose="lying"]{display:block}

/* la caja de la cara sigue a la cabeza de cada pose */
.stage[data-pose="stand"] .head{left:28.222%;top:16.963%;width:43.556%;height:20.524%}
.stage[data-pose="kneel"] .head{left:28.222%;top:21.152%;width:43.556%;height:20.524%}
.stage[data-pose="lying"] .head{left:28.222%;top:20.366%;width:43.556%;height:20.524%}

.hairfill{fill:var(--hair)}
.hairhi{fill:var(--hair-hi);opacity:.5}

/* peinado: largo, corto o pelado */
.hairback,.hairfront{display:none}
.stage[data-hair="long"] .hairback--long,
.stage[data-hair="long"] .hairfront--long,
.stage[data-hair="short"] .hairback--short,
.stage[data-hair="short"] .hairfront--short{display:block}

/* ---------- accesorios ---------- */
.acc{display:none}
.stage.gear-collar .a-collar,
.stage.gear-cuffs  .a-cuffs,
.stage.gear-rope   .a-rope{display:block}

.item{display:none}
.stage[data-item="whip"] .item--whip,
.stage[data-item="paddle"] .item--paddle,
.stage[data-item="flogger"] .item--flogger{display:block}

.headacc{position:absolute;inset:0;z-index:3;pointer-events:none}
.hacc{position:absolute;display:none;transform:translate(-50%,-50%)}
.hacc svg{width:100%;height:100%;display:block;overflow:visible}
.stage.gear-blind .hacc--blind,
.stage.gear-gag   .hacc--gag{display:block}
/* silueta de cara con el borde difuminado: se recorta la cara, no una pelota */
.face{
  position:absolute;inset:0;overflow:hidden;
  --facemask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M50 5 C70 5 83 20 83 43 C83 57 81 68 75 78 C68 90 59 95 50 95 C41 95 32 90 25 78 C19 68 17 57 17 43 C17 20 30 5 50 5 Z' fill='%23ffffff' filter='url(%23b)'/%3E%3C/svg%3E");
  -webkit-mask-image:var(--facemask);mask-image:var(--facemask);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.face canvas{width:100%;height:100%;display:block}

.head__empty{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.1rem;color:#7a604c;pointer-events:none;
}
.head__ring{
  position:absolute;left:14%;right:14%;top:5%;bottom:5%;
  border:4px dashed rgba(0,0,0,.35);
  border-radius:50% 50% 46% 46%/56% 56% 44% 44%;
}
.head__plus{font-size:1.9rem;line-height:1;opacity:.75}
.head__hint{font-size:.68rem;text-align:center;line-height:1.1;opacity:.8}
.has-face .head__empty{display:none}

/* ---------- expresión ---------- */
.fx{
  position:absolute;inset:0;opacity:0;
  transition:opacity .22s ease .06s;
  --skin:#f0cba8;--skin-l:var(--skin);--skin-r:var(--skin);--skin-m:var(--skin);
  --skin-dark:#b98f6b;
}
.is-moan .fx,.is-preview .fx{opacity:1;transition-duration:.05s;transition-delay:0s}

/* los parches de piel se difuminan en los bordes para que no se note el pegote */
#eyeL .s1,#eyeL .s0{stop-color:var(--skin-l)}
#eyeR .s1,#eyeR .s0{stop-color:var(--skin-r)}
#mouth .s1,#mouth .s0{stop-color:var(--skin-m)}
.s0{stop-opacity:0}
.d1{stop-color:var(--skin-dark);stop-opacity:.26}
.d0{stop-color:var(--skin-dark);stop-opacity:0}

.lid,.mouth{position:absolute;transform:translate(-50%,-50%)}
.lid svg,.mouth svg{width:100%;height:100%;display:block;overflow:visible}
.mouth{transform:translate(-50%,-50%) scaleY(.25);transition:transform .1s ease}
.is-moan .mouth,.is-preview .mouth{transform:translate(-50%,-50%) scaleY(var(--open))}

.blush{
  position:absolute;width:28%;height:13%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,70,125,.5),rgba(255,70,125,0) 70%);
  mix-blend-mode:multiply;top:55%;
}
.blush--l{left:9%}
.blush--r{right:9%}
.drop{position:absolute;right:2%;top:22%;font-size:1.1rem;filter:drop-shadow(0 0 2px rgba(255,255,255,.9))}
.is-moan .drop{animation:dropfall .8s ease-out}
@keyframes dropfall{0%{transform:translateY(-6px) scale(.4);opacity:0}30%{opacity:1}100%{transform:translateY(26px) scale(1);opacity:0}}

.is-moan .guy{animation:moanShake .42s ease-out}
@keyframes moanShake{
  0%{transform:rotate(var(--tilt)) scale(1)}
  25%{transform:rotate(calc(var(--tilt) - 3deg)) scale(1.04,.97)}
  55%{transform:rotate(calc(var(--tilt) + 4deg)) scale(.97,1.04)}
  80%{transform:rotate(var(--tilt)) scale(1.02,.99)}
  100%{transform:rotate(var(--tilt)) scale(1)}
}
.is-moan .head{animation:headPop .42s ease-out}
@keyframes headPop{0%{transform:scale(1)}40%{transform:scale(1.07) translateY(-3px)}100%{transform:scale(1)}}

/* ---------- partículas ---------- */
/* ---------- subir de nivel ---------- */
.levelup{
  position:absolute;left:50%;top:56%;z-index:8;
  transform:translate(-50%,-50%) scale(.4);
  display:flex;flex-direction:column;align-items:center;gap:.1rem;
  pointer-events:none;opacity:0;text-align:center;width:max-content;max-width:96%;
}
.levelup b{
  font-size:.72rem;letter-spacing:.22em;color:#0e0e12;
  background:var(--rank,var(--lime));border:3px solid var(--ink);
  padding:.08rem .5rem;box-shadow:3px 3px 0 var(--ink);
}
.levelup span{
  font-size:clamp(1.5rem,7.5vw,2.4rem);line-height:1;color:#fff;
  -webkit-text-stroke:5px var(--ink);paint-order:stroke fill;
  text-shadow:0 4px 0 var(--ink),0 7px 14px rgba(0,0,0,.45);
}
.levelup.show{animation:lvlPop 1.4s cubic-bezier(.2,1.6,.4,1) forwards}
.levelup--rank.show{animation:lvlPop 2.2s cubic-bezier(.2,1.6,.4,1) forwards}
.levelup--rank span{font-size:clamp(1.15rem,5.6vw,1.9rem)}
@keyframes lvlPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-8deg)}
  14%{opacity:1;transform:translate(-50%,-58%) scale(1.14) rotate(2deg)}
  26%{transform:translate(-50%,-56%) scale(1) rotate(0)}
  78%{opacity:1;transform:translate(-50%,-62%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-78%) scale(.94)}
}

/* el sacudón del escenario */
.stage.is-levelup .guy{animation:lvlShake .62s ease-out}
@keyframes lvlShake{
  0%{transform:translate(0,0) rotate(0) scale(1)}
  12%{transform:translate(0,-14px) rotate(-3deg) scale(1.06)}
  28%{transform:translate(0,3px) rotate(2.4deg) scale(.98)}
  46%{transform:translate(0,-7px) rotate(-1.6deg) scale(1.03)}
  68%{transform:translate(0,1px) rotate(.8deg) scale(1)}
  100%{transform:translate(0,0) rotate(0) scale(1)}
}
/* un fogonazo del color del rango sobre todo el escenario */
.stage.is-levelup::after{
  content:"";position:absolute;inset:0;z-index:7;pointer-events:none;
  background:radial-gradient(circle at 50% 36%,transparent 0%,transparent 34%,var(--rank,#fff) 78%);
  animation:lvlFlash .45s ease-out forwards;
}
@keyframes lvlFlash{0%{opacity:.7}100%{opacity:0}}

.conf{
  position:absolute;width:11px;height:15px;border-radius:2px;
  animation:confFly 1.25s cubic-bezier(.15,.7,.4,1) forwards;
}
@keyframes confFly{
  0%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}
  10%{opacity:1}
  100%{opacity:0;transform:translate(var(--px),var(--py)) rotate(var(--pr)) scale(1)}
}

.particles{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:visible}
.particles span{position:absolute;font-size:1.4rem;animation:pop 1s ease-out forwards}
@keyframes pop{
  0%{transform:translate(0,0) scale(.2) rotate(0);opacity:0}
  20%{opacity:1}
  100%{transform:translate(var(--px,0),var(--py,-90px)) scale(1.25) rotate(var(--pr,20deg));opacity:0}
}

/* ---------- contador ---------- */
.counter{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--ink);color:var(--lime);
  border:4px solid var(--ink);box-shadow:5px 5px 0 var(--pink);
  padding:.25rem .7rem;margin:.9rem 0 .2rem;
  font-size:.85rem;letter-spacing:.14em;transform:rotate(1deg);
}
.nextrank{
  margin:.35rem 0 0;text-align:center;
  font-size:.72rem;letter-spacing:.06em;color:#6b5f4c;
}
.nextrank b{color:var(--ink)}

.counter b{
  background:#0a0a0a;color:#ff3ba7;
  font-family:ui-monospace,"Courier New",monospace;font-size:1.05rem;
  padding:.05rem .35rem;border:2px inset #555;letter-spacing:.1em;
}

/* ---------- botones ---------- */
.controls{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:.8rem 0 .3rem}
.btn{
  font:inherit;font-size:1rem;cursor:pointer;
  background:#fff;color:var(--ink);
  border:4px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  padding:.42rem .8rem;transition:transform .08s,box-shadow .08s;
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn--main{background:var(--pink);color:#fff;font-size:1.12rem}
.btn--ghost{background:transparent;box-shadow:3px 3px 0 var(--ink);font-size:.9rem}
.btn[aria-pressed="false"]{opacity:.55;text-decoration:line-through}

/* ---------- cajón de personalización ---------- */
.wardrobe{width:100%;display:flex;flex-direction:column;align-items:center;gap:.55rem}
.wardrobe[hidden]{display:none}
.wardrobe__extra{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}

/* ---------- selector de pose, objeto y accesorios ---------- */
.picker{
  display:flex;flex-direction:column;gap:.35rem;
  margin:.8rem 0 0;padding:.5rem .7rem .55rem;
  background:#fff;border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  transform:rotate(.4deg);max-width:100%;
}
.picker__row{display:flex;align-items:center;gap:.4rem}
.picker__label{font-size:.6rem;letter-spacing:.12em;width:3.1rem;text-align:right;opacity:.65;flex:0 0 auto}
.chips{display:flex;gap:.25rem;flex-wrap:wrap}
.chip{
  font:inherit;font-size:.72rem;cursor:pointer;
  background:#f2efe8;color:var(--ink);
  border:2px solid var(--ink);border-radius:999px;
  padding:.16rem .5rem;line-height:1.3;
  transition:transform .08s;
}
.chip:hover{transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--pink);color:#fff;box-shadow:0 0 0 2px var(--lime) inset}
@media (max-width:420px){
  .chip{font-size:.66rem;padding:.14rem .4rem}
  .picker__label{width:2.6rem;font-size:.55rem}
}

/* ---------- cajón de personalización ---------- */
.wardrobe{width:100%;display:flex;flex-direction:column;align-items:center;gap:.55rem}
.wardrobe[hidden]{display:none}
.wardrobe__extra{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}

/* ---------- selector de pose, objeto y accesorios ---------- */
.picker{
  display:flex;flex-direction:column;gap:.35rem;
  margin:.8rem 0 0;padding:.5rem .7rem .55rem;
  background:#fff;border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  transform:rotate(.4deg);max-width:100%;
}
.picker__row{display:flex;align-items:center;gap:.4rem}
.picker__label{font-size:.6rem;letter-spacing:.12em;width:3.1rem;text-align:right;opacity:.65;flex:0 0 auto}
.chips{display:flex;gap:.25rem;flex-wrap:wrap}
.chip{
  font:inherit;font-size:.72rem;cursor:pointer;
  background:#f2efe8;color:var(--ink);
  border:2px solid var(--ink);border-radius:999px;
  padding:.16rem .5rem;line-height:1.3;
  transition:transform .08s;
}
.chip:hover{transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--pink);color:#fff;box-shadow:0 0 0 2px var(--lime) inset}
@media (max-width:420px){
  .chip{font-size:.66rem;padding:.14rem .4rem}
  .picker__label{width:2.6rem;font-size:.55rem}
}

/* ---------- paleta de piel y pelo ---------- */
.customizer{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  margin:.7rem 0 .1rem;padding:.5rem .7rem .55rem;
  background:#fff;border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  transform:rotate(-.5deg);max-width:100%;
}
.customizer__row{display:flex;align-items:center;gap:.4rem;justify-content:center}
.customizer__label{font-size:.6rem;letter-spacing:.12em;width:2.3rem;text-align:right;opacity:.65}
.swatches{display:flex;gap:.22rem}
.swatch{
  width:19px;height:19px;padding:0;border-radius:50%;
  border:2px solid var(--ink);cursor:pointer;flex:0 0 auto;
  transition:transform .08s;
}
.swatch:hover{transform:scale(1.18)}
.swatch[aria-pressed="true"]{outline:3px solid var(--pink);outline-offset:2px}
.swatch--custom{
  width:21px;height:21px;background:none;overflow:hidden;
  -webkit-appearance:none;appearance:none;
}
.swatch--custom::-webkit-color-swatch-wrapper{padding:0}
.swatch--custom::-webkit-color-swatch{border:0;border-radius:50%}
.swatch--custom::-moz-color-swatch{border:0;border-radius:50%}
.customizer__auto{
  font:inherit;font-size:.7rem;cursor:pointer;
  background:none;border:0;text-decoration:underline;color:#6b5f4c;padding:.1rem;
}
.customizer__auto:hover{color:var(--pink)}
@media (max-width:420px){
  .swatch{width:16px;height:16px}
  .swatch--custom{width:18px;height:18px}
  .swatches{gap:.16rem}
}

.status{margin:.35rem 0 0;min-height:1.4em;font-size:.86rem;text-align:center;color:#6b5f4c}
.status.err{color:#b3001b;font-weight:700}
.status.busy::after{content:" ⏳"}

/* ---------- panel de ajustes ---------- */
.panel{
  width:100%;margin:.9rem 0 0;
  border:3px solid var(--ink);background:#d8d4cc;
  box-shadow:7px 7px 0 var(--ink);transform:rotate(-.6deg);
}
.panel__bar{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(90deg,var(--pink),#7a1fff);
  color:#fff;font-size:.85rem;padding:.25rem .3rem .25rem .55rem;
}
.panel__x{
  font:inherit;cursor:pointer;background:#d8d4cc;color:var(--ink);
  border:2px outset #fff;width:1.5rem;height:1.4rem;line-height:1;padding:0;
}
.panel__body{padding:.7rem}
.panel__note{margin:0 0 .6rem;font-size:.8rem;color:#4b463d}
.panel__h{
  margin:.9rem 0 .35rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:#4b463d;border-bottom:2px solid #b4afa6;padding-bottom:.15rem;
}
.panel__body>.panel__h:first-child{margin-top:0}
.voicerow{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.voicerow select{font:inherit;font-size:.8rem;flex:1 1 12rem;min-width:0;padding:.2rem;border:2px inset #fff}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .8rem}
.grid label{display:flex;flex-direction:column;gap:.15rem;font-size:.78rem}
.grid input[type=range]{width:100%;accent-color:var(--pink)}
@media (max-width:420px){.grid{grid-template-columns:1fr}}

/* ---------- money rain ---------- */
.btn--money{
  background:linear-gradient(180deg,#ffe14d,#2fbf5f);
  color:#0d2b16;font-size:1.15rem;letter-spacing:.04em;
  margin:.5rem 0 .1rem;
  box-shadow:5px 5px 0 var(--ink);
  animation:moneyPulse 2.2s ease-in-out infinite;
}
.btn--money:disabled{filter:grayscale(.5) brightness(1.05);cursor:default;animation:none}
@keyframes moneyPulse{0%,100%{transform:rotate(-1deg) scale(1)}50%{transform:rotate(1deg) scale(1.04)}}

.money{
  position:fixed;inset:0;pointer-events:none;z-index:9000;overflow:hidden;
  /* la cámara sos vos: el punto de fuga está donde está el personaje */
  perspective:1000px;
  perspective-origin:50% 40%;
}
/* El billete sale de frente, desde tu lado de la pantalla, y se aleja hacia ella.
   Se anima translateZ de verdad, no una escala falsa: por eso los que salen del
   centro se abren hacia los bordes cuando están cerca tuyo, como pasa de verdad. */
.money i{
  position:absolute;left:50%;top:50%;
  width:88px;height:42px;margin:-21px 0 0 -44px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 44'%3E%3Crect x='1.5' y='1.5' width='89' height='41' rx='3' fill='%2386c98a' stroke='%23245c30' stroke-width='2.5'/%3E%3Crect x='6' y='6' width='80' height='32' rx='2' fill='none' stroke='%23245c30' stroke-width='1.3' opacity='.65'/%3E%3Ccircle cx='46' cy='22' r='11.5' fill='%23d8eed2' stroke='%23245c30' stroke-width='1.6'/%3E%3Ctext x='46' y='27.5' font-family='Georgia,serif' font-size='15' font-weight='700' fill='%23245c30' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='16' y='15' font-family='Georgia,serif' font-size='8.5' font-weight='700' fill='%23245c30' text-anchor='middle'%3E100%3C/text%3E%3Ctext x='76' y='36' font-family='Georgia,serif' font-size='8.5' font-weight='700' fill='%23245c30' text-anchor='middle'%3E100%3C/text%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.3));
  transform-style:preserve-3d;
  animation:throwIn cubic-bezier(.55,.06,.68,.5) forwards;
}
@keyframes throwIn{
  0%{
    transform:translate3d(var(--x),var(--y),640px) rotate3d(1,.6,.35,var(--r0));
    opacity:0;
  }
  12%{opacity:.92}
  30%{opacity:1}
  85%{opacity:1}
  100%{
    transform:translate3d(var(--x),calc(var(--y) + var(--drop)),-780px) rotate3d(1,.6,.35,var(--r1));
    opacity:0;
  }
}

/* El baile va después de moanShake a propósito: si le pegás mientras baila, el baile
   no se corta. El pivote está a la altura de los pies, así el balanceo mueve la
   cadera en vez de hacer saltar todo el cuerpo. Dos ritmos superpuestos (cuerpo a
   2 s = un compás, cabeza a 1 s) es lo que lo hace ver bailado y no mecánico. */
.stage.is-dancing .guy{
  transform-origin:50% 93%;
  animation:sway 2s ease-in-out infinite;
}
@keyframes sway{
  0%{transform:rotate(-6deg) translateX(-7px) scale(1,1)}
  25%{transform:rotate(0deg) translateX(0) scale(1.035,.965)}
  50%{transform:rotate(6deg) translateX(7px) scale(1,1)}
  75%{transform:rotate(0deg) translateX(0) scale(.965,1.035)}
  100%{transform:rotate(-6deg) translateX(-7px) scale(1,1)}
}
/* la cabeza va con retraso: sin eso el muñeco se mueve de una pieza */
.stage.is-dancing .head{animation:headRoll 2s ease-in-out infinite -.45s}
@keyframes headRoll{
  0%{transform:rotate(5deg) translateY(0)}
  25%{transform:rotate(0deg) translateY(-4px)}
  50%{transform:rotate(-5deg) translateY(0)}
  75%{transform:rotate(0deg) translateY(-4px)}
  100%{transform:rotate(5deg) translateY(0)}
}
.stage.is-dancing .whip{animation:whipSway 2s ease-in-out infinite -.2s}
@keyframes whipSway{
  0%{transform:rotate(9deg)}
  50%{transform:rotate(-11deg)}
  100%{transform:rotate(9deg)}
}

/* Escondido a la vista pero presente en el layout: con display:none —que es lo que
   pone el atributo hidden— Safari y iOS se niegan a abrir el selector de archivos. */
.offscreen{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  overflow:hidden;white-space:nowrap;
}

/* ---------- cursor látigo ---------- */
.whipcursor{
  position:fixed;left:0;top:0;width:74px;height:74px;
  z-index:9999;pointer-events:none;
  transform:translate3d(-300px,-300px,0);
  opacity:0;transition:opacity .12s;
}
.whipcursor.on{opacity:1}
.whipcursor svg{width:100%;height:100%;display:block;overflow:visible}
.wc__grip,.wc__knob{fill:#141118}
.wc__knob{fill:#9a9aa6}
.wc__lash{fill:none;stroke:#141118;stroke-linecap:round;filter:drop-shadow(0 1px 1px rgba(255,255,255,.55))}
.wc__lash--1{stroke-width:6}
.wc__lash--2{stroke-width:3}
.wc__whip{transform-box:view-box;transform-origin:12px 12px}
.wc__hit{opacity:0;transform-box:view-box;transform-origin:70px 78px}
.wc__hit path{fill:none;stroke:#ff2e88;stroke-width:5;stroke-linecap:round}
.wc__hit text{
  font-family:var(--comic);font-size:21px;font-weight:700;
  fill:#fff;stroke:#141118;stroke-width:5;paint-order:stroke fill;
}
/* el cursor del sistema se esconde, pero vuelve sobre los controles para no marear */
body.has-whip{cursor:none}
body.has-whip input,body.has-whip select,body.has-whip textarea{cursor:auto}

.whipcursor.is-crack .wc__whip{animation:wcCrack .34s ease-out}
.whipcursor.is-crack .wc__hit{animation:wcHit .42s ease-out}
@keyframes wcCrack{
  0%{transform:rotate(0)}
  22%{transform:rotate(-34deg)}
  52%{transform:rotate(20deg)}
  100%{transform:rotate(0)}
}
@keyframes wcHit{
  0%{opacity:0;transform:scale(.35) rotate(-8deg)}
  25%{opacity:1;transform:scale(1.05) rotate(2deg)}
  100%{opacity:0;transform:scale(1.6) rotate(8deg)}
}

/* ---------- flotantes raros ---------- */
.floaters{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.floaters span{position:absolute;opacity:.7;animation:drift linear infinite}
@keyframes drift{from{transform:translateY(110vh) rotate(0)}to{transform:translateY(-20vh) rotate(360deg)}}

/* ---------- páginas de texto (privacy) ---------- */
.page{
  max-width:44rem;margin:0 auto;padding:1.6rem 1.1rem 3rem;
  position:relative;z-index:2;line-height:1.55;
}
.page__title{
  margin:.2rem 0 .1rem;font-size:clamp(2rem,9vw,3rem);line-height:.95;color:#fff;
  text-shadow:3px 3px 0 var(--ink),6px 6px 0 var(--pink);
  transform:rotate(-1.5deg);
}
.page__date{margin:.9rem 0 1.4rem;font-family:ui-monospace,"Courier New",monospace;font-size:.75rem;opacity:.6}
.page h2{
  margin:2rem 0 .4rem;font-size:1.15rem;
  border-bottom:3px solid var(--ink);display:inline-block;padding-bottom:.1rem;
}
.page p,.page li{font-size:.95rem}
.page ul{padding-left:1.2rem;margin:.5rem 0}
.page li{margin:.35rem 0}
.page code,.page .mono{font-family:ui-monospace,"Courier New",monospace;font-size:.85em;background:rgba(0,0,0,.08);padding:.05em .3em;border-radius:3px}
.page a{color:var(--ink);text-underline-offset:2px;text-decoration-thickness:2px}
.page a:hover{color:var(--pink)}
.page__box{
  background:#fff;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  padding:.7rem 1rem;margin:1.4rem 0;transform:rotate(-.4deg);
}
.page__box p{margin:.3rem 0}
.page__box--big{transform:rotate(.5deg);box-shadow:6px 6px 0 var(--pink)}
.page__back{margin-top:2.4rem;text-align:center}
.page__back .foot__link{color:#fff}
.page__back .foot__link:hover{color:#fff}

@media (max-width:420px){
  .page{padding:1.2rem .9rem 2.4rem}
  .page h2{font-size:1.05rem}
}

/* ---------- footer ---------- */
.foot{text-align:center;margin-top:1.6rem;padding:0 1rem;font-size:.8rem;color:#6b5f4c;position:relative;z-index:2}
.foot p{margin:.25rem 0}
.foot__links{
  display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;
  margin:.7rem 0 .5rem;
}
.foot__link{
  display:inline-flex;align-items:center;gap:.3rem;
  font-family:var(--comic);font-size:.85rem;text-decoration:none;
  color:#fff;background:#1f2328;
  border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  padding:.3rem .7rem;
  transition:transform .08s,box-shadow .08s;
}
.foot__link:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.foot__link:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.foot__link--gh{transform:rotate(-1.2deg)}
.foot__link--gh:hover{transform:rotate(-1.2deg) translate(-1px,-1px)}
.foot__link--x{background:#000;transform:rotate(1.2deg)}
.foot__link--x:hover{transform:rotate(1.2deg) translate(-1px,-1px)}
/* el único botón del pie que pide algo: va en el rojo de Ko-fi para que se separe
   de los otros dos, que son negros, y torcido para el otro lado */
.foot__link--kofi{background:#ff5e5b;transform:rotate(-.9deg)}
.foot__link--kofi:hover{transform:rotate(-.9deg) translate(-1px,-1px)}

.foot__fine{font-size:.75rem;opacity:.8}
.foot__fine a{color:inherit;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:rgba(107,95,76,.5)}
.foot__fine a:hover{color:var(--pink);text-decoration-color:currentColor}

.foot__weird{font-family:ui-monospace,"Courier New",monospace;font-size:.7rem;opacity:.65}

/* ---------- celular: menos aire y menos alto ---------- */
@media (max-width:520px){
  .top{padding:.6rem .6rem .1rem}
  .live{margin-bottom:.25rem;font-size:.62rem}
  .tagline{font-size:.82rem;padding:.2rem .5rem;margin-top:.4rem}
  .main{padding:.5rem .7rem 0}
  .stage{width:min(80vw,300px)}
  .btn{font-size:.9rem;padding:.34rem .6rem;border-width:3px;box-shadow:3px 3px 0 var(--ink)}
  .btn--main{font-size:.95rem}
  .btn--money{font-size:1rem}
  .money i{width:80px;height:38px;margin:-19px 0 0 -40px}
  .controls{gap:.4rem;margin:.6rem 0 .2rem}
  .counter{margin:.6rem 0 .1rem;font-size:.75rem}
  .foot{margin-top:1rem}
  .foot__link{font-size:.78rem;padding:.26rem .55rem;border-width:2px;box-shadow:3px 3px 0 var(--ink)}
  .bubble{font-size:1rem;padding:.35rem .7rem .45rem;right:-4%;top:16%;max-width:72%}
}

@media (prefers-reduced-motion:reduce){
  .ticker__track,.sunburst,.head__ring,.logo,.guy,.floaters span,.nametag__pen{animation:none}
  .whipcursor.is-crack .wc__whip,.whipcursor.is-crack .wc__hit{animation:none}
  .is-moan .guy,.is-moan .head,.is-moan .drop,.is-moan .whip{animation:none}
  .btn--money,.stage.is-dancing .guy,.stage.is-dancing .head,.stage.is-dancing .whip{animation:none}
  .money i{animation-duration:1s}
  .stage.is-levelup .guy{animation:none}
  .stage.is-levelup::after{animation:none;opacity:0}
  .conf{display:none}
  .levelup.show,.levelup--rank.show{animation:none;opacity:1;transform:translate(-50%,-58%) scale(1)}
  .aura,.nametag__rank{animation:none}
}