/* MiauNOX: todo el estilo del sitio (antes iba dentro de index.html) */
html{padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}img{max-width:100%}
:root{--cat-sit:url("gatos/img/cat-sit.webp");--cat-walk:url("gatos/img/cat-walk.webp");--cat-sleep:url("gatos/img/cat-sleep.webp");--cat-orb:url("gatos/img/cat-orb.webp");--cat-stretch:url("gatos/img/cat-stretch.webp");--cat-paw:url("gatos/img/cat-paw.webp");--cat-stalk:url("gatos/img/cat-stalk.webp");--cat-bristle:url("gatos/img/cat-bristle.webp");--cat-leap:url("gatos/img/cat-leap.webp");--cat-qr:url("gatos/img/cat-qr.webp");--pet-room:url("gatos/img/pet-room.webp");--pet-bed:url("gatos/img/pet-bed.webp");--pet-yarn:url("gatos/img/pet-yarn.webp");--pet-faces:url("gatos/img/pet-faces.webp");--pet-tub:url("gatos/img/pet-tub.webp");--pet-bowl:url("gatos/img/pet-bowl.webp");}
/* Layout: one centred column (max 1120px). A neon-framed hero flanked by two cats, then a 3-up grid of
   test cards. Every test plays inside a single framed "stage" tinted with that test's colour.
   Single dark look on purpose: the page is a neon sign in the void. */
:root{
  color-scheme:dark;
  --void:#070b16;      /* page ground */
  --deep:#0b1222;      /* framed surfaces */
  --panel:#0f1830;     /* cards */
  --tile:#18264a;      /* idle game tiles */
  --line:#263761;      /* hairlines */
  --ink:#eaf2ff;       /* text */
  --dim:#93a4c4;       /* secondary text */
  --on:#051019;        /* text on a neon fill */
  --green:#4dff88;
  --cyan:#35d8ff;
  --orange:#ff9d3d;
  --pink:#ff5fc8;
  --violet:#a98bff;
  --bad:#ff4f6e;
  --card-red:#d3214f;  /* red suits on the light card face */
  /* one colour per digit 0-9 (Dígitos de Pi) */
  --d0:#93a4c4; --d1:#35d8ff; --d2:#4dff88; --d3:#c6f24a; --d4:#ffe04d;
  --d5:#ff9d3d; --d6:#ff6a55; --d7:#ff5fc8; --d8:#a98bff; --d9:#6d8cff;
  --display:'Unbounded','Trebuchet MS',system-ui,sans-serif;
  --body:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --gutter:clamp(16px,4vw,32px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--void);color:var(--ink);font:400 16px/1.55 var(--body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(60rem 36rem at 10% -10%,color-mix(in srgb,var(--green) 10%,transparent),transparent 70%),
  radial-gradient(52rem 34rem at 98% 16%,color-mix(in srgb,var(--cyan) 10%,transparent),transparent 70%),
  radial-gradient(46rem 30rem at 50% 112%,color-mix(in srgb,var(--violet) 9%,transparent),transparent 70%)}
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
svg{display:block}

.app{position:relative;z-index:1;max-width:1120px;margin-inline:auto;padding-inline:var(--gutter);padding-block:clamp(20px,4vw,36px) 40px;display:flex;flex-direction:column;gap:clamp(24px,4vw,40px)}

/* ---------- header ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--void) 84%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.top-in{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;max-width:1120px;margin-inline:auto;padding:12px var(--gutter)}
.logo{display:inline-flex;align-items:center;gap:10px;padding:4px 0;border:0;background:none;cursor:pointer;color:var(--green);font:800 1.05rem/1 var(--display);letter-spacing:.04em;text-shadow:0 0 14px color-mix(in srgb,var(--green) 55%,transparent)}
.logo svg{width:30px;height:30px;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--green) 70%,transparent))}
.grow{flex:1 1 0}
.nav{display:flex;flex-wrap:wrap;gap:2px clamp(8px,2.4vw,24px)}
.top-tools{display:flex;align-items:center;gap:8px}
/* volver al menú: solo existe mientras hay una prueba abierta, y viaja con la cabecera fija */
.menu-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 20px 8px 12px;border:0;border-radius:999px;background:var(--ink);color:var(--on);font:800 .76rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 24px -6px var(--ink);transition:transform .12s,box-shadow .15s}
.menu-back:hover{transform:translateX(-2px);box-shadow:0 0 30px -4px var(--ink)}
.menu-back svg{flex:none;width:20px;height:20px}
.menu-back kbd{padding:3px 6px;border-radius:6px;background:color-mix(in srgb,var(--on) 14%,transparent);font:700 .62rem/1 var(--mono);letter-spacing:.04em}
body[data-view="play"] .nav{display:none}
/* racha: siempre visible. gris = sin racha · borde naranja = falta jugar hoy · llena = ya jugaste hoy */
.streak{--k:var(--dim);position:relative;display:inline-flex;align-items:center;gap:4px;min-height:34px;padding:4px 12px 4px 8px;border:0;border-radius:999px;background:color-mix(in srgb,var(--deep) 86%,var(--k));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--k) 75%,transparent);color:var(--k);font:700 .9rem/1 var(--mono);font-variant-numeric:tabular-nums;cursor:pointer;transition:background .2s,color .2s}
.streak svg{width:18px;height:18px;fill:currentColor}
.streak[data-state="pending"]{--k:var(--orange)}
.streak[data-state="pending"] > svg{animation:ember 1.8s ease-in-out infinite}
.streak[data-state="on"]{--k:var(--orange);background:var(--orange);color:var(--on);box-shadow:0 0 18px -4px var(--orange)}
.streak.pop{animation:streakpop .9s cubic-bezier(.3,1.6,.4,1)}
.streak.pop::after{content:"";position:absolute;inset:-3px;border-radius:inherit;box-shadow:0 0 0 2px var(--orange);animation:ring .9s ease-out forwards;pointer-events:none}
/* fragmentos estelares: junto a la racha. El escudito aparece si hay un protector de racha guardado */
.wallet{--k:#7fe9ff;display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:4px 12px 4px 9px;border:0;border-radius:999px;background:color-mix(in srgb,var(--deep) 84%,var(--k));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--k) 70%,transparent);color:#bff4ff;font:700 .9rem/1 var(--mono);font-variant-numeric:tabular-nums;cursor:pointer;transition:box-shadow .15s,transform .12s}
.wallet:hover{box-shadow:inset 0 0 0 2px var(--k),0 0 16px -4px var(--k)}
.wallet > svg{width:17px;height:17px;fill:color-mix(in srgb,var(--k) 35%,transparent);stroke:var(--k);stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 0 3px #35d8ff)}
.wallet.pop{animation:streakpop .9s cubic-bezier(.3,1.6,.4,1)}
/* precio en fragmentos dentro de un botón: ◆ 150 */
.cost-coin{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--on) 18%,transparent);font:800 .78rem/1 var(--mono)}
.cost-coin svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.wallet-box{display:grid;gap:12px}
.wallet-sum{display:flex;align-items:center;justify-content:center;gap:10px;font:800 2rem/1 var(--display);color:#bff4ff;text-shadow:0 0 18px #35d8ff}
.wallet-sum svg{width:30px;height:30px;fill:color-mix(in srgb,#7fe9ff 35%,transparent);stroke:#7fe9ff;stroke-width:1.6;stroke-linejoin:round}
.wallet-ways{display:grid;gap:6px;margin:0;padding:0;list-style:none;color:var(--dim);font:500 .84rem/1.35 var(--body)}
.wallet-ways b{color:var(--ink)}
.wallet-box > .pill,.wallet-box > #wallet-guard{justify-self:center}
@keyframes ember{50%{opacity:.45;transform:scale(.9)}}
@keyframes streakpop{0%{transform:scale(.7)}45%{transform:scale(1.28) rotate(-5deg)}100%{transform:scale(1)}}
@keyframes ring{to{inset:-16px;opacity:0}}
.icon-btn{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:none;box-shadow:inset 0 0 0 2px var(--line);color:var(--dim);cursor:pointer;transition:color .15s,box-shadow .15s}
.icon-btn:hover{color:var(--ink);box-shadow:inset 0 0 0 2px var(--dim)}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn[aria-pressed="false"] .waves{display:none}
.icon-btn[aria-pressed="true"] .mute{display:none}
.acct{display:inline-flex;align-items:center;gap:7px;max-width:190px;min-height:34px;padding:6px 16px;border:0;border-radius:999px;background:none;box-shadow:inset 0 0 0 2px var(--cyan);color:var(--cyan);font:700 .72rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:box-shadow .15s}
.acct:hover,.acct[aria-current="page"]{box-shadow:inset 0 0 0 2px var(--cyan),0 0 16px -4px var(--cyan)}
.acct.in{box-shadow:inset 0 0 0 2px var(--green);color:var(--green);font-size:.84rem;letter-spacing:.01em;text-transform:none}
.acct.in:hover,.acct.in[aria-current="page"]{box-shadow:inset 0 0 0 2px var(--green),0 0 16px -4px var(--green)}
.acct .paw{flex:none;width:14px;height:14px}
.acct span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav button{padding:8px 2px;border:0;background:none;cursor:pointer;color:var(--dim);font:600 .74rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;transition:color .15s}
.nav button:hover{color:var(--ink)}
.nav button[aria-current="page"]{color:var(--green);text-shadow:0 0 12px color-mix(in srgb,var(--green) 60%,transparent)}

/* ---------- buttons ---------- */
.btn{--c:var(--green);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 22px;border:0;border-radius:999px;background:var(--c);color:var(--on);font:700 .76rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 18px -4px var(--c);transition:transform .12s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 26px -2px var(--c)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.link{padding:0;border:0;background:none;color:var(--cyan);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.btn-row.start{justify-content:flex-start}
.btn.ghost{background:transparent;color:var(--c);box-shadow:inset 0 0 0 2px var(--c)}
.btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--c),0 0 18px -4px var(--c)}
.btn.big{min-height:48px;padding-inline:30px;font-size:.84rem}
.stage .btn{--c:inherit}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- cats ---------- */
.cat{background:center/contain no-repeat}
.cat-sit{aspect-ratio:380/633;background-image:var(--cat-sit)}
.cat-walk{aspect-ratio:523/505;background-image:var(--cat-walk)}
.cat-sleep{aspect-ratio:461/382;background-image:var(--cat-sleep)}
.cat-orb{aspect-ratio:232/215;background-image:var(--cat-orb)}
.cat-stretch{aspect-ratio:255/294;background-image:var(--cat-stretch)}
.cat-paw{aspect-ratio:248/276;background-image:var(--cat-paw)}
.cat-stalk{aspect-ratio:301/259;background-image:var(--cat-stalk)}
.cat-bristle{aspect-ratio:263/270;background-image:var(--cat-bristle)}
.cat-leap{aspect-ratio:340/250;background-image:var(--cat-leap)}
.cat-qr{aspect-ratio:193/280;background-image:var(--cat-qr)}
.cat.mini{flex:none;width:34px;height:30px}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr) minmax(0,210px);align-items:center;gap:clamp(12px,3vw,32px);padding:clamp(22px,4vw,40px) clamp(18px,4vw,40px);border:2px solid transparent;border-radius:24px;background:linear-gradient(var(--deep),var(--deep)) padding-box,linear-gradient(100deg,var(--green),var(--cyan)) border-box;box-shadow:0 0 30px -8px color-mix(in srgb,var(--cyan) 70%,transparent),0 0 70px -24px color-mix(in srgb,var(--green) 60%,transparent)}
.hero-copy{display:grid;gap:16px;justify-items:center;text-align:center;min-width:0}
.hero h1{font:800 clamp(1.3rem,3.1vw,2.05rem)/1.2 var(--display);letter-spacing:-.01em}
.hero h1 b{color:var(--green);text-shadow:0 0 18px color-mix(in srgb,var(--green) 55%,transparent)}
.hero-copy > p{max-width:46ch;color:var(--dim);font-size:1.02rem}
.hero .cat{width:100%;animation:float 7s ease-in-out infinite}
.hero .cat-sleep{animation-delay:-3.5s}
@keyframes float{50%{transform:translateY(-8px)}}

/* ---------- tests grid ---------- */
.tests{display:grid;gap:0;scroll-margin-top:84px}
.tests h2,.about h2,.stats h1{font:700 clamp(.95rem,2vw,1.15rem)/1.3 var(--display);letter-spacing:.12em;text-transform:uppercase;text-align:center}
.walker{justify-self:start;width:clamp(84px,11vw,118px);margin:6px 0 -9px 5%;position:relative;z-index:1}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:18px}
.card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;gap:16px;padding:20px;border:2px solid var(--c);border-radius:18px;background:var(--panel);box-shadow:0 0 20px -8px var(--c),inset 0 0 34px -22px var(--c);transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-3px);box-shadow:0 0 30px -6px var(--c),inset 0 0 40px -18px var(--c)}
.ico{color:var(--c);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 55%,transparent))}
.ico svg{width:100%;height:100%}
.card .ico{width:54px;height:54px}
.card-text{display:grid;gap:6px;align-content:start;padding-right:22px;min-width:0}
.card h3{font:700 1rem/1.25 var(--display)}
.card-text p{color:var(--dim);font-size:.94rem;line-height:1.4}
.card-how{justify-self:start;color:var(--k,var(--cyan));font-size:.82rem;font-weight:600;text-underline-offset:3px}
.card-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.card .btn{--c:inherit}
.best{display:inline-flex;align-items:center;gap:8px;font:500 .78rem/1.2 var(--mono);color:var(--dim)}
.best b{color:var(--c);font-weight:700}
.paw{fill:currentColor}
.card > .paw{position:absolute;top:14px;right:14px;width:20px;height:20px;color:var(--c);opacity:.5;transform:rotate(18deg)}

.card-more{display:flex;align-items:center;justify-content:center;gap:16px;min-width:0;padding:20px;border:2px dashed var(--line);border-radius:18px;color:var(--dim)}
.card-more .cat{flex:none;height:84px}
.card-more h3{font:700 .95rem/1.25 var(--display);color:var(--ink)}
.card-more p{font-size:.93rem;line-height:1.4}

/* ---------- about ---------- */
.about{display:grid;gap:22px;scroll-margin-top:84px}
.about-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:20px 32px}
.about h3{font:700 .86rem/1.3 var(--display);color:var(--cyan);margin-bottom:6px}
.about p{color:var(--dim);max-width:60ch}
/* la escalera: un bloque por gato, y dentro sus divisiones en el orden en que se sube */
.ranks-title{margin:26px 0 4px;font:700 1rem/1.3 var(--display)}
.ranks-note{margin:0 0 14px;color:var(--dim);font-size:.9rem}
.ranks,.rank-divs{padding:0;margin:0;list-style:none}
.ranks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:12px}
.rank-tier{min-width:0;padding:12px 8px 10px;border-radius:16px;background:color-mix(in srgb,var(--deep) 93%,var(--t));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t) 28%,transparent)}
.rank-divs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
.rung{position:relative;display:grid;justify-items:center;align-content:start;gap:8px;min-width:0;padding:8px 2px 6px;border-radius:12px;text-align:center;font:600 .76rem/1.25 var(--body)}
.rung .cat{width:100%;max-width:84px;height:66px}
.rung + .rung::before{content:"›";position:absolute;left:-7px;top:30px;color:color-mix(in srgb,var(--t) 70%,var(--dim));font:700 1.1rem/1 var(--body)}      /* flecha entre divisiones */
.rung.me{color:var(--t);background:color-mix(in srgb,var(--deep) 78%,var(--t));box-shadow:inset 0 0 0 2px var(--t)}
.rung.me span::after{content:" · tú";font-weight:500}
.rank-tier.apex .rung .cat{max-width:120px;height:94px}

/* aura del gato según su división: crece al subir (III poca, II media, I la mayor de su gato) y es máxima en el último rango.
   data-glow lo pone el código (glowOf): 1, 2, 3 y 4. --gk agranda el aura en los gatos grandes. */
.cat[data-glow="1"]{--gr:2px;--gs:35%}
.cat[data-glow="2"]{--gr:7px;--gs:70%}
.cat[data-glow="3"]{--gr:12px;--gs:100%}
.cat[data-glow="4"]{--gr:17px;--gs:100%}
.cat[data-glow]{filter:drop-shadow(0 0 calc(var(--gr)*var(--gk,1)) color-mix(in srgb,var(--t) var(--gs),transparent))}
/* las dos más altas además laten. El estado de reposo es el aura más grande y la animación la encoge:
   el navegador reserva el espacio del aura según el reposo, y si creciera al animarse saldría recortada */
.cat[data-glow="3"],.cat[data-glow="4"]{filter:drop-shadow(0 0 calc(var(--gr)*var(--gk,1)*1.5) var(--t)) drop-shadow(0 0 calc(var(--gr)*var(--gk,1)/2) var(--t));animation:catglow 2.8s ease-in-out infinite}
.cat[data-glow="4"]{animation-duration:2s}
@keyframes catglow{50%{filter:drop-shadow(0 0 calc(var(--gr)*var(--gk,1)*.8) var(--t)) drop-shadow(0 0 calc(var(--gr)*var(--gk,1)/4) var(--t))}}
.foot{padding-top:18px;border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent);color:var(--dim);font-size:.84rem;text-align:center}
/* el pie lleva enlaces a la página de cada juego (las que encuentra Google) */
.foot-games{display:grid;justify-items:center;gap:8px;margin-bottom:12px}
.foot-games > a{color:var(--ink);font-weight:700}
.foot-games ul{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin:0;padding:0;list-style:none}
.foot-games ul a{color:var(--dim)}
.foot-games ul a:hover{color:var(--ink)}
.foot p{margin:0}

/* ---------- play ---------- */
.play{display:grid;gap:16px}
.play-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-width:0}
.play-title .ico{width:34px;height:34px;flex:none}
.play-title h1{font:700 clamp(1rem,2.6vw,1.3rem)/1.2 var(--display)}
.hud{display:flex;align-items:center;gap:14px;min-height:28px;margin-left:auto;font:700 .92rem/1 var(--mono);color:var(--c)}
.lives{display:flex;gap:5px}
.lives .paw{width:22px;height:22px;color:var(--c);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--c) 60%,transparent))}
.lives .paw.lost{color:var(--line);filter:none}
.stage{position:relative;display:grid;place-items:center;min-height:clamp(400px,62vh,560px);padding:clamp(16px,3vw,32px);border:2px solid var(--c);border-radius:22px;background:color-mix(in srgb,var(--deep) 94%,var(--c));box-shadow:0 0 34px -12px var(--c),inset 0 0 80px -50px var(--c);overflow:hidden}
.stack{display:grid;gap:18px;justify-items:center;width:100%;text-align:center}
.msg{color:var(--dim);font:600 .82rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;min-height:1.3em}

.intro,.result{display:grid;gap:16px;justify-items:center;text-align:center;max-width:520px}
.intro .ico{width:76px;height:76px}
.intro h2{font:700 clamp(1.15rem,3vw,1.5rem)/1.2 var(--display)}
.intro .how{color:var(--ink);opacity:.86;font-size:1.04rem}
.goal-line{font-size:1rem}
.goal-line .goal-num{color:var(--c);font-family:var(--mono)}
.meta{color:var(--dim);font:500 .82rem/1.4 var(--mono)}
.eyebrow{color:var(--dim);font:600 .74rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase}
.score{font:800 clamp(2.2rem,8vw,3.6rem)/1 var(--display);color:var(--c);text-shadow:0 0 26px color-mix(in srgb,var(--c) 55%,transparent);font-variant-numeric:tabular-nums}

/* medidor de la partida: rango actual, puntaje en vivo y una barra que se llena hasta la meta (la marca) y más allá */
.meter{--t:var(--green);scroll-margin-top:calc(var(--top-h,64px) + 10px);display:flex;align-items:center;gap:14px;padding:10px 16px 10px 12px;border-radius:16px;background:color-mix(in srgb,var(--deep) 92%,var(--c));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 40%,var(--line));transition:box-shadow .3s}
.meter-cat{flex:none;width:62px;height:56px}
.meter-body{flex:1 1 0;min-width:0;display:grid;gap:6px}
.meter-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.meter-rank{font:700 .88rem/1.25 var(--display)}
.meter-sub{color:var(--t);font:700 .74rem/1.25 var(--mono)}
.meter-score{display:inline-flex;align-items:baseline;gap:8px;margin-left:auto}
.meter-score small{color:var(--dim);font:600 .62rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.meter-score b{color:var(--c);font:700 .98rem/1.25 var(--mono);font-variant-numeric:tabular-nums}
.goal-bar{position:relative;height:10px;border-radius:99px;background:var(--tile)}
.goal-fill{position:absolute;inset:0;border-radius:inherit;background:var(--c);transform-origin:left;transform:scaleX(var(--f,0));transition:transform .45s cubic-bezier(.3,.7,.2,1),background .3s}
.goal-mark{position:absolute;top:-4px;bottom:-4px;left:62%;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--ink);box-shadow:0 0 0 2px var(--deep)}
.meter-foot{color:var(--dim);font-size:.8rem;line-height:1.3}
.meter-foot b{color:var(--ink);font-weight:700}
.meter.hit{box-shadow:inset 0 0 0 2px var(--green),0 0 26px -6px var(--green)}
.meter.hit .goal-fill{background:var(--green);box-shadow:0 0 12px var(--green)}
.meter.hit .meter-foot b{color:var(--green)}
.meter.flash{animation:rankup .9s ease-out}
.meter.unranked .goal-bar{display:none}
@keyframes rankup{from{box-shadow:inset 0 0 0 2px var(--green),0 0 40px 0 var(--green)}}
@keyframes catpop{from{transform:scale(.4) rotate(-14deg);opacity:.2}}

/* shared tile grid (visual + sequence) */
.grid{--n:3;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(5px,1.4vw,11px);width:min(100%,400px)}
.tile{aspect-ratio:1;padding:0;border:0;border-radius:14%;background:var(--tile);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:background .12s,box-shadow .12s,transform .12s;touch-action:manipulation}
.grid.locked .tile{cursor:default}
.tile.lit,.tile.hit{background:var(--c);box-shadow:0 0 24px -2px var(--c)}
.tile.tap{background:color-mix(in srgb,var(--c) 75%,var(--ink));transform:scale(.95)}
.tile.miss{background:var(--deep);box-shadow:inset 0 0 0 2px var(--bad)}
.tile.bad{background:var(--bad);box-shadow:0 0 24px -2px var(--bad)}
.tile.ghost{box-shadow:inset 0 0 0 2px var(--c)}

/* reaction */
.pad{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:16px;padding:20px;border:0;background:color-mix(in srgb,var(--deep) 90%,var(--orange));cursor:pointer;text-align:center;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.pad:focus-visible{outline-offset:-8px}
.pad-big{font:800 clamp(1.5rem,6vw,2.8rem)/1.1 var(--display);font-variant-numeric:tabular-nums}
.pad-small{color:var(--dim);font-size:1rem;min-height:1.5em}
.eyes{display:flex;align-items:center;gap:42px;height:62px}
.eyes i{display:block;width:78px;height:5px;border-radius:50%;background:var(--orange);box-shadow:0 0 14px var(--orange)}
.eyes i:first-child{transform:rotate(9deg)} .eyes i:last-child{transform:rotate(-9deg)}
.pad[data-state="go"]{background:var(--green);color:var(--on)}
.pad[data-state="go"] .eyes i{height:54px;background:radial-gradient(ellipse 11% 46% at 50% 50%,var(--on) 96%,transparent 100%),var(--ink);box-shadow:0 0 0 3px var(--on)}
.pad[data-state="early"]{background:color-mix(in srgb,var(--deep) 78%,var(--bad))}
.pad[data-state="early"] .eyes i{background:var(--bad);box-shadow:0 0 14px var(--bad)}
.pad[data-state="shown"]{background:color-mix(in srgb,var(--deep) 90%,var(--cyan))}
.pad[data-state="shown"] .eyes i{background:var(--cyan);box-shadow:0 0 14px var(--cyan)}
.pad[data-state="shown"] .pad-big{color:var(--cyan)}

/* number memory */
.digits{max-width:100%;font:700 clamp(1.7rem,7vw,3.4rem)/1.15 var(--mono);letter-spacing:.06em;overflow-wrap:anywhere;color:var(--c);text-shadow:0 0 24px color-mix(in srgb,var(--c) 50%,transparent)}
.digits.sm{font-size:clamp(1.2rem,4.6vw,2rem);color:var(--ink);text-shadow:none}
.digits .wrong{color:var(--bad);text-decoration:line-through}
.bar{width:min(100%,260px);height:6px;border-radius:99px;background:var(--tile);overflow:hidden}
.bar i{display:block;height:100%;background:var(--c);transform-origin:left;animation:drain linear forwards}
@keyframes drain{to{transform:scaleX(0)}}
.field{width:min(100%,420px);padding:14px 16px;border:2px solid var(--line);border-radius:14px;background:var(--deep);color:var(--ink);font:700 clamp(1.2rem,5vw,1.8rem)/1.2 var(--mono);letter-spacing:.08em;text-align:center}
.field:focus{outline:none;border-color:var(--c);box-shadow:0 0 20px -6px var(--c)}
.timer{display:flex;align-items:center;gap:12px;width:min(100%,420px)}
.timer .bar{flex:1 1 0;width:auto}
.clock{min-width:4ch;text-align:right;color:var(--c);font:700 .95rem/1 var(--mono);font-variant-numeric:tabular-nums}
.hurry .bar i{background:var(--bad)}
.hurry .clock{color:var(--bad)}
.digits .none{color:var(--dim);font:500 1rem/1.4 var(--body);letter-spacing:0}
.pair{display:grid;gap:4px;justify-items:center;max-width:100%}
/* respuesta con teclado propio: una casilla por dígito */
.num{gap:14px}
.slots{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:100%}
.slots i{display:grid;place-items:center;width:clamp(30px,8.6vw,44px);aspect-ratio:3/4;border-radius:9px;background:var(--deep);box-shadow:inset 0 0 0 2px var(--line);color:var(--ink);font:700 clamp(1.05rem,4.4vw,1.6rem)/1 var(--mono);font-style:normal;transition:box-shadow .12s,color .12s}
.slots i.on{box-shadow:inset 0 0 0 2px var(--c)}
.slots i.cur{box-shadow:inset 0 0 0 2px var(--ink);animation:blink 1.1s ease-in-out infinite}
.slots.ok i{box-shadow:inset 0 0 0 2px var(--green),0 0 14px -2px var(--green);color:var(--green)}
.num-pad{width:min(100%,300px)}
.num-pad .key{--k:var(--c);min-height:54px;font-size:1.45rem}
.num-pad .key:last-child{grid-column:auto}
.num-pad .key.del{--k:var(--dim)}
.num-pad .key svg{width:24px;height:24px;margin:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.num-pad.off{opacity:.45;pointer-events:none}

/* verbal memory */
.word{font:700 clamp(1.8rem,8vw,3.4rem)/1.15 var(--display);overflow-wrap:anywhere;animation:pop .22s ease-out}
.word.bad{color:var(--bad)}
@keyframes pop{from{opacity:.2;transform:scale(.94)}}

/* chimp test */
.board{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));aspect-ratio:var(--cols)/var(--rows);width:min(100%,calc(var(--cols) * 86px))}
.chip{margin:6%;padding:0;border:2px solid var(--c);border-radius:16%;background:color-mix(in srgb,var(--deep) 86%,var(--c));color:var(--ink);font:700 clamp(1rem,3.6vw,1.6rem)/1 var(--mono);cursor:pointer;touch-action:manipulation}
.board.masked .chip{background:var(--ink);border-color:var(--ink);color:transparent}
.chip.gone{visibility:hidden}
.chip.bad{background:var(--bad);border-color:var(--bad);color:var(--on)}

/* playing cards */
.hand,.tray{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(6px,1.3vw,12px);width:100%}
.hand{--cw:clamp(46px,8.5vw,76px);min-height:calc(var(--cw) * 1.4)}
.tray{--cw:clamp(42px,7.4vw,62px);min-height:calc(var(--cw) * 1.4 + 15px);padding-top:14px;border-top:1px dashed var(--line)}
.tray:empty{border-color:transparent}
.deal-foot{display:grid;gap:12px;justify-items:center;align-content:start;width:100%;min-height:64px}
.pc{position:relative;display:block;flex:none;width:var(--cw);aspect-ratio:5/7;padding:0;border:0;background:none;color:inherit;font-size:calc(var(--cw) * .27);perspective:700px}
button.pc{cursor:pointer;touch-action:manipulation;transition:transform .15s}
button.pc:hover{transform:translateY(-5px)}
.pc-in{position:absolute;inset:0;display:block;transform-style:preserve-3d;transform:rotateY(180deg);transition:transform .42s cubic-bezier(.3,.7,.2,1)}
.pc.up .pc-in{transform:rotateY(0deg)}
.pc.snap .pc-in{transition:none}
.pc-face,.pc-back{position:absolute;inset:0;display:grid;place-items:center;border-radius:9%/6.5%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.pc-face{background:var(--ink);color:var(--on);box-shadow:0 3px 12px -4px var(--void)}
.pc-face.red{color:var(--card-red)}
.pc-back{transform:rotateY(180deg);background:var(--panel);color:var(--c);box-shadow:inset 0 0 0 2px var(--c),inset 0 0 16px -4px var(--c)}
.pc-back svg{width:56%;filter:drop-shadow(0 0 4px var(--c))}
.pc-idx{position:absolute;top:5%;left:8%;display:grid;justify-items:center;gap:.08em;font:700 1em/1 var(--mono);letter-spacing:-.06em}
.pc-idx svg{width:.72em;height:.72em}
.pc-idx:last-child{top:auto;left:auto;right:8%;bottom:5%;transform:rotate(180deg)}
.pc-pip{display:grid}
.pc-pip svg{width:calc(var(--cw) * .4);height:calc(var(--cw) * .4)}
.pc.next .pc-back{animation:beckon 1.1s ease-in-out infinite}
@keyframes beckon{50%{box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 18px -2px var(--c),0 0 20px -2px var(--c)}}
.pc.ok .pc-face{animation:landed .55s ease-out}
@keyframes landed{from{box-shadow:0 0 0 3px var(--green),0 0 28px 2px var(--green)}}
.pc.missed .pc-face{box-shadow:0 0 0 3px var(--bad)}
.pc.used{opacity:.16;pointer-events:none}
.pc.wrong{animation:shake .42s}
.pc.wrong .pc-face{box-shadow:0 0 0 3px var(--bad),0 0 20px var(--bad)}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.pc-ghost{position:fixed;z-index:20;margin:0;pointer-events:none;transform-origin:0 0}

/* ---------- fichas bajo el tablero (racha, combo, velocidad, fallos libres) ---------- */
.game-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:28px}
.game-chip{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;background:color-mix(in srgb,var(--deep) 80%,var(--c));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent);color:var(--dim);font:700 .72rem/1.2 var(--body);letter-spacing:.06em}
.game-chip.combo.hot{color:var(--on);background:#ffe04d;box-shadow:0 0 16px -2px #ffe04d;animation:chippop .35s cubic-bezier(.3,1.6,.5,1)}
.game-chip.warn{color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad)}
@keyframes chippop{from{transform:scale(.75)}}

/* ---------- El Ovillo Escondido: vasos neón sobre una mesa, el ovillo del cuarto escondido debajo ---------- */
.shell-wrap{width:min(100%,600px)}
.shell-table{--n:3;position:relative;width:100%;height:clamp(150px,30vw,214px);background:radial-gradient(60% 34% at 50% 90%,color-mix(in srgb,var(--c) 20%,transparent),transparent 72%)}
.shell-table::after{content:"";position:absolute;left:3%;right:3%;bottom:10%;height:2px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 65%,transparent),transparent)}
.shell{position:absolute;left:calc(var(--x)*1%);bottom:11%;z-index:2;width:min(calc(100% / var(--n) - 14px),132px);aspect-ratio:100/112;padding:0;border:0;background:none;transform:translateX(-50%);cursor:default;-webkit-tap-highlight-color:transparent}
.shell-cup{position:absolute;inset:0;z-index:2;display:block;transition:transform .32s cubic-bezier(.3,1.4,.5,1)}
.shell-cup svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--c) 55%,transparent))}
.cup-body{fill:color-mix(in srgb,var(--c) 15%,#0b1222);stroke:var(--c);stroke-width:3.5;stroke-linejoin:round}
.cup-rim{fill:color-mix(in srgb,var(--c) 30%,#0b1222);stroke:var(--c);stroke-width:3.5}
.cup-shine{fill:none;stroke:rgba(255,255,255,.32);stroke-width:4;stroke-linecap:round}
.cup-star{fill:#ffe04d}
.cup-dot{fill:#eaf2ff;opacity:.75}
.shell.up .shell-cup{transform:translateY(-64%) rotate(-7deg)}
.shell-yarn{position:absolute;left:50%;bottom:-2%;z-index:1;width:74%;aspect-ratio:204/154;background:var(--pet-yarn) center/contain no-repeat;transform:translateX(-50%);filter:drop-shadow(0 0 8px #ff5fc8)}
.shell .shell-yarn{opacity:0;transition:opacity .14s .16s}                     /* con el vaso abajo no asoma nada: no se puede adivinar */
.shell.up .shell-yarn{opacity:1;transition-delay:0s}
.shell-yarn.hop{animation:yarnhop .65s cubic-bezier(.3,1.5,.5,1)}
@keyframes yarnhop{40%{transform:translateX(-50%) translateY(-42%) rotate(-14deg)}72%{transform:translateX(-50%) translateY(3%) scale(1.08,.9)}}
.shell-table.pick .shell{cursor:pointer}
.shell-table.pick .shell .shell-cup svg{animation:cuppulse 1.2s ease-in-out infinite}
.shell-table.pick .shell:hover .shell-cup,.shell-table.pick .shell:focus-visible .shell-cup{transform:translateY(-9%)}
.shell:focus-visible{outline:none}
.shell:focus-visible .cup-body{stroke:var(--ink)}
@keyframes cuppulse{50%{filter:drop-shadow(0 0 15px var(--c))}}
.shell.right .cup-body,.shell.right .cup-rim{stroke:var(--green)}
.shell.right .shell-cup svg{filter:drop-shadow(0 0 12px var(--green))}
.shell.wrong .cup-body,.shell.wrong .cup-rim{stroke:var(--bad)}
.shell.wrong .shell-cup svg{filter:drop-shadow(0 0 12px var(--bad))}
.shell-keys{--n:3;display:grid;grid-template-columns:repeat(var(--n),1fr);margin-top:4px;color:var(--dim);font:700 .78rem/1 var(--mono)}

/* ---------- Parejas Estelares: cartas que giran en 3D ---------- */
.mem-board{--cols:4;--cw:70px;display:grid;grid-template-columns:repeat(var(--cols),var(--cw));gap:10px;justify-content:center}
.mc{position:relative;display:block;width:var(--cw);aspect-ratio:1/1.28;padding:0;border:0;background:none;cursor:pointer;perspective:700px;-webkit-tap-highlight-color:transparent}
.mc-in{position:absolute;inset:0;display:block;transform-style:preserve-3d;transform:rotateY(180deg);transition:transform .34s cubic-bezier(.3,.7,.2,1)}
.mc.up .mc-in{transform:rotateY(0)}
.mc.done .mc-in{transform:rotateY(0) scale(.94)}
.mc-face,.mc-back{position:absolute;inset:0;display:grid;place-items:center;border-radius:13%/10%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.mc-face{background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--fc) 24%,#0b1222),#0b1222 78%);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--fc) 80%,transparent),0 4px 14px -6px #000;color:var(--fc)}
.mc-face svg{width:64%;height:64%;overflow:visible;filter:drop-shadow(0 0 5px var(--fc))}
.mc-back{transform:rotateY(180deg);background:linear-gradient(160deg,var(--panel),color-mix(in srgb,var(--c) 14%,var(--panel)));color:var(--c);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 65%,transparent),inset 0 0 18px -6px var(--c)}
.mc-back svg{width:50%;filter:drop-shadow(0 0 4px var(--c))}
.mc:not(.up):not(.done):hover .mc-in{transform:rotateY(180deg) translateY(-4px)}
.mc:focus-visible{outline:none}
.mc:focus-visible .mc-back,.mc:focus-visible .mc-face{box-shadow:inset 0 0 0 2px var(--ink),0 0 14px -2px var(--ink)}
.mc.done{cursor:default}
.mc.done .mc-face{animation:mcmatch .55s cubic-bezier(.3,1.5,.5,1);box-shadow:inset 0 0 0 2px var(--fc),0 0 22px -3px var(--fc)}
.mc.wrong .mc-face{animation:shake .42s;box-shadow:inset 0 0 0 2px var(--bad),0 0 18px -3px var(--bad)}
.mc.missed .mc-face{opacity:.6;box-shadow:inset 0 0 0 2px var(--bad)}
@keyframes mcmatch{40%{transform:scale(1.16)}}
/* ---------- Constelaciones: un cielo con estrellas que se tocan y líneas que se dibujan ---------- */
.sky{position:relative;width:min(100%,620px);aspect-ratio:16/10;border-radius:18px;background:radial-gradient(70% 60% at 30% 30%,color-mix(in srgb,var(--violet) 14%,transparent),transparent 70%),radial-gradient(60% 60% at 80% 80%,color-mix(in srgb,var(--c) 12%,transparent),transparent 70%),#050914;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent),inset 0 0 60px -20px var(--c);overflow:hidden}
.sky-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sky-lines line{stroke:var(--c);stroke-width:.55;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 4px var(--c));animation:skydraw .32s ease-out forwards}
.sky-lines line.mine{stroke:#ffe04d;filter:drop-shadow(0 0 5px #ffe04d)}
.sky-lines line.hint{stroke:var(--bad);opacity:.8}
.sky-lines.fade line{transition:opacity .35s;opacity:0}
@keyframes skydraw{to{stroke-dashoffset:0}}
.sky-stars{position:absolute;inset:0}
.star{position:absolute;display:grid;place-items:center;width:clamp(30px,6.5%,44px);aspect-ratio:1;padding:0;border:0;border-radius:50%;background:none;color:#cfe8ff;transform:translate(-50%,-50%);cursor:default;-webkit-tap-highlight-color:transparent}
.star svg{width:62%;height:62%;fill:currentColor;filter:drop-shadow(0 0 4px #9fd8ff);animation:startw 2.600s ease-in-out infinite;animation-delay:calc(var(--tw)*-1)}
@keyframes startw{50%{opacity:.55;transform:scale(.82)}}
.sky.pick .star{cursor:pointer}
.sky.pick .star:hover svg{transform:scale(1.25);filter:drop-shadow(0 0 8px var(--c))}
.star.lit{color:#fff}
.star.lit svg{animation:none;transform:scale(1.55);filter:drop-shadow(0 0 6px var(--c)) drop-shadow(0 0 14px var(--c))}
.star.wrong svg{animation:none;color:var(--bad);transform:scale(1.5);filter:drop-shadow(0 0 10px var(--bad))}
.star.hint svg{animation:none;transform:scale(1.35);color:#ffd0d8;filter:drop-shadow(0 0 8px var(--bad))}
.star:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sky.done .star.lit svg{animation:starwin .9s ease-out}
@keyframes starwin{40%{transform:scale(2.1);filter:drop-shadow(0 0 16px #ffe04d)}}

/* ---------- El gato que se esconde: cajas de neón, gatos que entran y salen ---------- */
.hide-scene{position:relative;width:min(100%,620px);height:clamp(190px,34vw,250px);border-radius:18px;background:radial-gradient(70% 30% at 50% 96%,color-mix(in srgb,var(--c) 16%,transparent),transparent 72%);overflow:hidden}
.hide-scene::after{content:"";position:absolute;left:2%;right:2%;bottom:7%;height:2px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 60%,transparent),transparent)}
.hide-box{position:absolute;left:calc(var(--x)*1%);bottom:7%;z-index:2;width:min(22%,130px);aspect-ratio:100/86;transform:translateX(-50%);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--bc) 55%,transparent))}
.hide-box svg{width:100%;height:100%;overflow:visible}
.hide-box.ask{filter:drop-shadow(0 0 16px var(--bc))}
.hide-box.ask::before{content:"?";position:absolute;left:50%;top:-34%;transform:translateX(-50%);color:var(--bc);font:800 1.3rem/1 var(--display);text-shadow:0 0 10px var(--bc)}
.hide-count{position:absolute;left:50%;top:-40%;display:grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border-radius:999px;background:var(--bc);color:var(--on);font:800 1.05rem/1 var(--mono);transform:translateX(-50%);box-shadow:0 0 16px -2px var(--bc);animation:catpop .45s cubic-bezier(.3,1.6,.4,1)}
.hide-box.ask.open::before{display:none}
.hide-cat{position:absolute;bottom:8%;z-index:1;width:min(13%,74px);height:auto;transform:translateX(-50%);filter:drop-shadow(0 0 6px rgba(120,220,255,.5))}
.hide-cat.flip{transform:translateX(-50%) scaleX(-1)}
/* los gatos animados cuadro a cuadro: la celda trae aire bajo las patas, así que se baja hasta que pisen el suelo */
.hide-cat.cat-anim{width:min(20%,122px);transform:translate(-50%,calc((1 - var(--foot))*100%));will-change:left,bottom}
.hide-cat.cat-anim.flip{transform:translate(-50%,calc((1 - var(--foot))*100%)) scaleX(-1)}
.hide-pad{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:48px}
.hide-num{min-width:48px;min-height:48px;padding:0 12px;border:0;border-radius:14px;background:color-mix(in srgb,var(--deep) 80%,var(--c));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 70%,transparent);color:var(--ink);font:800 1.15rem/1 var(--mono);cursor:pointer;transition:transform .12s,box-shadow .15s}
.hide-num:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 2px var(--c),0 0 16px -4px var(--c)}
.hide-num.right{background:var(--green);color:var(--on);box-shadow:0 0 18px -2px var(--green)}
.hide-num.wrong{background:var(--bad);color:var(--on);animation:shake .42s}
@media (prefers-reduced-motion:reduce){
  .star svg,.sky.done .star.lit svg,.hide-count{animation:none!important}
  .sky-lines line{animation:none!important;stroke-dashoffset:0}
}
@media (prefers-reduced-motion:reduce){
  .shell-cup,.mc-in{transition:none!important}
  .shell-table.pick .shell .shell-cup svg,.shell-yarn.hop,.mc.done .mc-face,.mc.wrong .mc-face,.game-chip.combo.hot{animation:none!important}
}

/* digits of pi */
.pi{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(14px,3vw,36px);width:100%}
.pi-sky{justify-self:center;width:min(100%,400px);aspect-ratio:1}
.pi-sky svg{width:100%;height:100%;overflow:visible}
.pi-zoom{transition:transform .6s ease}
.pi-glyph{font:italic 700 30px Georgia,'Times New Roman',serif;fill:var(--c);filter:drop-shadow(0 0 6px var(--c))}
.pi-star{transform-box:fill-box;transform-origin:center;animation:star .5s ease-out}
@keyframes star{from{transform:scale(3.4);opacity:.15}}
.pi-side{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;justify-items:center;min-width:0}
.pi-tape{display:flex;align-items:center;width:100%;font:700 clamp(1.25rem,3.4vw,1.9rem)/1.3 var(--mono);white-space:nowrap}
.pi-done{flex:1 1 0;min-width:0;display:flex;justify-content:flex-end;padding-block:.35em;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 32%);mask-image:linear-gradient(90deg,transparent,#000 32%)}
.pi-run{flex:none}
.pi-d{display:inline-block}
.pi-d.gap{margin-right:.4em}
.pi-d.miss{text-decoration:underline wavy var(--bad);text-underline-offset:.22em}
.pi-d:last-child{text-shadow:0 0 14px currentColor;animation:pop .2s ease-out}
.pi-caret{flex:none;width:3px;height:1.3em;margin-inline:.2em;border-radius:2px;background:var(--c);animation:blink 1.1s ease-in-out infinite}
@keyframes blink{50%{opacity:.15}}
.pi-todo{flex:1 1 0;min-width:0;overflow:hidden;color:var(--line);letter-spacing:.1em}
.pi-tape.shake{animation:shake .42s}
.pi-pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(100%,264px)}
.key{--k:var(--ink);position:relative;overflow:hidden;min-height:50px;padding:0;border:2px solid var(--k);border-radius:14px;background:color-mix(in srgb,var(--deep) 86%,var(--k));color:var(--k);font:700 1.3rem/1 var(--mono);cursor:pointer;touch-action:manipulation;transition:transform .08s}
.key:last-child{grid-column:2}
.key:active{transform:scale(.94)}
.key::after{content:"";position:absolute;inset:0;background:var(--k);opacity:0;pointer-events:none}
.key.bad::after{background:var(--bad)}
.key.hit::after{animation:flash .3s ease-out}
.key.bad::after{animation:flash .45s ease-out}
@keyframes flash{from{opacity:.8}}

/* ---------- stats ---------- */
.stats,#stats-body{display:grid;gap:22px}
.row .btn{--c:inherit}
.stats-head{display:grid;gap:6px;justify-items:center;text-align:center}
.stats-head p{color:var(--dim)}
.rows{display:grid;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,.75fr)) 230px auto;align-items:center;gap:8px 18px;padding:16px 4px;border-bottom:1px solid var(--line)}
.row-name{display:flex;align-items:center;gap:12px;min-width:0;font:700 .9rem/1.25 var(--display)}
.row-name .ico{width:32px;height:32px;flex:none}
.row-name small{display:block;margin-top:3px;color:var(--dim);font:500 .7rem/1.3 var(--mono)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.tile-stat{display:grid;gap:4px;align-content:start;padding:14px 16px;border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.tile-stat small{color:var(--dim);font:600 .66rem/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase}
.tile-stat{--t:var(--ink)}
.tile-stat b{color:var(--t);font:700 clamp(1rem,2.4vw,1.25rem)/1.2 var(--display);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tile-stat span{color:var(--dim);font-size:.8rem;line-height:1.3}
.seg{display:inline-flex;justify-self:center;padding:3px;border-radius:999px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.seg button{padding:8px 15px;border:0;border-radius:999px;background:none;color:var(--dim);font:600 .78rem/1 var(--body);cursor:pointer}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{background:var(--cyan);color:var(--on)}
.daywrap{width:230px;min-width:0}
.daychart{position:relative;cursor:crosshair;border-radius:6px}
.daychart svg{width:100%;height:auto;overflow:visible}
.daychart.none{display:grid;place-items:center;width:230px;min-height:62px;cursor:default;color:var(--dim);font:500 .74rem/1.3 var(--mono);text-align:center}
.tip{position:absolute;bottom:calc(100% + 2px);z-index:3;display:grid;gap:1px;padding:6px 10px;border-radius:9px;background:var(--panel);box-shadow:0 0 0 1px var(--line),0 8px 20px -6px var(--void);text-align:center;white-space:nowrap;pointer-events:none;transform:translateX(-50%)}
.tip b{font:700 .84rem/1.2 var(--mono)}
.tip span{color:var(--dim);font:500 .7rem/1.2 var(--body)}
.trend{margin-top:4px;color:var(--dim);font-size:.74rem;line-height:1.35}
.trend b{color:var(--ink);font-weight:700}
.trend .good{color:var(--green)} .trend .bad{color:var(--bad)}
.sync{color:var(--dim);font:500 .76rem/1.3 var(--mono)}
.sync[data-sync="saved"]{color:var(--green)}
.sync[data-sync="offline"],.sync[data-sync="error"],.sync[data-sync="unverified"]{color:var(--orange)}

/* ---------- account ---------- */
.account{display:grid;justify-items:center}
#account-body{display:grid;justify-items:center;width:100%}
.panel{display:grid;gap:16px;width:min(100%,440px);padding:clamp(20px,4vw,32px);border:2px solid transparent;border-radius:22px;background:linear-gradient(var(--deep),var(--deep)) padding-box,linear-gradient(100deg,var(--green),var(--cyan)) border-box;box-shadow:0 0 30px -10px var(--cyan)}
.panel.wide{width:min(100%,560px)}
.panel h1{font:700 1.25rem/1.25 var(--display);overflow-wrap:anywhere}
.panel-cat{justify-self:center;height:112px}
.lead{color:var(--dim);overflow-wrap:anywhere}
.panel .seg{justify-self:start}
.notice{padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--deep) 82%,var(--orange));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--orange) 55%,transparent);font-size:.9rem}
.notice.verify{display:grid;gap:10px;line-height:1.45}
.notice.verify .mail{overflow-wrap:anywhere}
.notice.verify .btn-row{margin-top:2px}
.notice.verify .btn{min-height:44px}
.form{display:grid;gap:14px}
.fld{display:grid;gap:6px}
.fld span{color:var(--dim);font:600 .7rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.fld small{color:var(--dim);font-size:.8rem}
.input{width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:12px;background:var(--void);color:var(--ink);font:500 1rem/1.3 var(--body)}
.input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 18px -6px var(--cyan)}
.input:disabled{opacity:.5}
.form-msg{color:var(--bad);font-size:.9rem}
.form-msg.ok{color:var(--green)}
.form-msg:empty{display:none}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.form-note{color:var(--dim);font-size:.86rem}
.acct-head{display:flex;align-items:center;gap:16px;min-width:0}
.acct-head > div:last-child{min-width:0}
.acct-cat{flex:none;width:86px;height:86px}
.acct-rank{color:var(--ink);font:700 .84rem/1.3 var(--mono)}
.acct-sec{display:grid;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.acct-sec h2{color:var(--cyan);font:700 .84rem/1.3 var(--display)}
.acct-sec .btn{justify-self:start}
.acct-del{padding-top:16px;border-top:1px solid var(--line)}
.acct-del summary{color:var(--dim);font-size:.9rem;cursor:pointer}
.acct-del .form-note{margin-block:12px}
.stat{display:grid;gap:3px}
.stat small{color:var(--dim);font:600 .66rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.stat span{font:700 .98rem/1.2 var(--mono);font-variant-numeric:tabular-nums}
.stat.best span{color:var(--c)}
.empty{display:grid;gap:14px;justify-items:center;text-align:center;padding:12px 0 4px}
.empty .cat{height:120px}
.empty p{color:var(--dim);max-width:44ch}
.danger{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;color:var(--dim);font-size:.9rem}
.btn.warn{--c:var(--bad)}


/* ---------- liga: panel de inicio ---------- */
.dash{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:18px;scroll-margin-top:calc(var(--top-h,64px) + 14px)}
.dash-card{--t:var(--cyan);display:grid;gap:14px;align-content:start;min-width:0;padding:clamp(16px,3vw,24px);border-radius:20px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.dash-card h2{font:700 clamp(1.05rem,2.6vw,1.35rem)/1.2 var(--display);overflow-wrap:anywhere}
.dash-card h3{font:700 .8rem/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase}
.league{grid-template-columns:auto minmax(0,1fr);align-items:center;align-content:center;gap:14px clamp(14px,3vw,24px);box-shadow:inset 0 0 0 2px var(--t),0 0 30px -12px var(--t)}
.dash-cat{--gk:1.5;width:clamp(88px,15vw,128px);height:clamp(88px,15vw,128px);filter:drop-shadow(0 0 14px color-mix(in srgb,var(--t) 45%,transparent))}
.dash-main{display:grid;gap:9px;min-width:0}
.dash-note{color:var(--dim);font-size:.9rem;line-height:1.4}
.dash-note.risk{color:var(--orange)}
.dash-note.shape{font-size:.82rem}
.dash-note.shape.up{color:var(--green)}
.dash-note.shape.down{color:var(--orange)}
.lp-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;font:700 .82rem/1.2 var(--mono);font-variant-numeric:tabular-nums}
.lp-row b{color:var(--t);font-size:1.05rem}
.lp-row span{color:var(--dim);font-weight:500}
.lp-bar{position:relative;height:12px;border-radius:99px;background:var(--tile);overflow:hidden}
.lp-bar i{position:absolute;inset:0;border-radius:inherit;background:var(--t);transform-origin:left;transform:scaleX(var(--f,0));transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.lp-bar.snap i{transition:none}
.lvl{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding-top:12px;border-top:1px solid var(--line);font:700 .78rem/1.2 var(--mono)}
.lvl-badge{padding:5px 10px;border-radius:8px;background:color-mix(in srgb,var(--deep) 70%,var(--violet));box-shadow:inset 0 0 0 1px var(--violet);color:var(--ink);white-space:nowrap}
.lvl .lp-bar{--t:var(--violet);flex:1 1 90px;min-width:0;height:8px}        /* en pantallas angostas el multiplicador y el texto bajan a otra línea antes de aplastar la barra */
.lvl span:last-child{color:var(--dim);font-weight:500;white-space:nowrap}
.daily-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:color-mix(in srgb,var(--deep) 78%,var(--k,var(--line)));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k,var(--line)) 70%,transparent);color:var(--k,var(--dim));font:700 .72rem/1.2 var(--body);letter-spacing:.04em}
.pill.gold{--k:#ffe04d} .pill.done{--k:var(--green)} .pill.fire{--k:var(--orange)} .pill.xp{--k:var(--violet)}
.quests{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.quest{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:6px 10px;font-size:.95rem;line-height:1.3}
.quest .tick{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line);color:var(--on)}
.quest .tick svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.quest.done .tick{background:var(--green);box-shadow:0 0 12px -2px var(--green)}
.quest.done .tick svg{opacity:1}
.quest.done > span:nth-child(2){color:var(--dim);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--dim) 60%,transparent)}
.quest small{color:var(--dim);font:700 .76rem/1 var(--mono);font-variant-numeric:tabular-nums}
.quest .lp-bar{--t:var(--cyan);grid-column:2/-1;height:5px}
.quest.done .lp-bar{--t:var(--green)}
.chest{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-top:14px;border-top:1px solid var(--line)}
.chest-ico{flex:none;width:44px;height:44px;color:var(--dim)}
.chest-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chest p{flex:1 1 150px;min-width:0;color:var(--dim);font-size:.9rem;line-height:1.35}
.chest p b{color:var(--ink)}
.chest.ready .chest-ico{color:#ffe04d;filter:drop-shadow(0 0 8px #ffe04d);animation:wiggle 1.6s ease-in-out infinite}
.chest.ready .btn{--c:#ffe04d}
.chest.open .chest-ico{color:var(--t)}
@keyframes wiggle{0%,60%,100%{transform:rotate(0)}68%{transform:rotate(-9deg)}76%{transform:rotate(8deg)}84%{transform:rotate(-5deg)}92%{transform:rotate(3deg)}}
.card .goal{display:block;margin-top:3px;color:var(--dim)}
.card .best{display:block}

/* ---------- racha activa: aura de la barra de XP ----------
   data-aura lo pone el código según el hito de racha alcanzado: 1 → primer multiplicador (×2), 2 → segundo (×3), 3 → tercero (×5).
   Cada nivel cambia el color (--a, --a2), el tamaño del brillo (--glow) y la velocidad (--beat). */
[data-aura="1"]{--a:#35d8ff;--a2:#6d8cff;--glow:12px;--beat:2.8s}     /* azul */
[data-aura="2"]{--a:#b79bff;--a2:#ff5fc8;--glow:18px;--beat:2s}       /* morada */
[data-aura="3"]{--a:#ffe04d;--a2:#ff8a3d;--glow:26px;--beat:1.3s}     /* dorada */
.lvl[data-aura] .lvl-badge{background:color-mix(in srgb,var(--deep) 70%,var(--a));box-shadow:inset 0 0 0 1px var(--a),0 0 14px -4px var(--a)}
.lvl-mult{padding:4px 8px;border-radius:8px;background:linear-gradient(135deg,var(--a),var(--a2));color:var(--on);font-weight:800;box-shadow:0 0 var(--glow) -4px var(--a);white-space:nowrap}
.lvl[data-aura] .xp-bar{overflow:visible;background:color-mix(in srgb,var(--tile) 78%,var(--a));animation:aura var(--beat) ease-in-out infinite}
/* el relleno: un haz de energía que corre hacia la punta */
.lvl[data-aura] .xp-bar i{background:linear-gradient(90deg,var(--a2),var(--a) 35%,#fff 50%,var(--a) 65%,var(--a2));background-size:220% 100%;animation:energy var(--beat) linear infinite}
/* la punta: una chispa (×2 y ×3) o una llama (×5) */
.xp-spark{display:none;position:absolute;top:50%;left:calc(var(--f,0)*100%);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px var(--a),0 0 var(--glow) 4px color-mix(in srgb,var(--a) 60%,transparent);pointer-events:none}
.lvl[data-aura] .xp-spark{display:block;animation:spark var(--beat) ease-in-out infinite}
.lvl[data-aura="3"] .xp-spark{width:13px;height:19px;margin:-14px 0 0 -7px;border-radius:50% 50% 50% 50%/64% 64% 36% 36%;background:linear-gradient(#fff,var(--a) 50%,var(--a2));transform-origin:50% 90%;animation:flame .42s ease-in-out infinite alternate}
/* ×5: además, un destello que recorre toda la barra */
.lvl[data-aura="3"] .xp-bar::after{content:"";position:absolute;inset:-4px 0;border-radius:99px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--a) 55%,transparent),transparent) 0 0/34% 100% no-repeat;animation:sweep 1.7s linear infinite;pointer-events:none}
@keyframes aura{0%,100%{box-shadow:0 0 0 1px color-mix(in srgb,var(--a) 55%,transparent),0 0 calc(var(--glow)*.5) -3px var(--a)}50%{box-shadow:0 0 0 1px var(--a),0 0 var(--glow) 0 var(--a)}}
@keyframes energy{to{background-position:-220% 0}}
@keyframes spark{0%,100%{transform:scale(.8);opacity:.8}50%{transform:scale(1.3);opacity:1}}
@keyframes flame{from{transform:scale(.95,.85) rotate(-5deg)}to{transform:scale(1.1,1.3) rotate(6deg)}}
@keyframes sweep{from{background-position:-50% 0}to{background-position:150% 0}}
.pill.aura{--k:var(--a);color:var(--ink);box-shadow:inset 0 0 0 1px var(--a),0 0 var(--glow) -6px var(--a)}
.toast.aura1,.toast.aura2,.toast.aura3{--k:var(--a)}
.toast.aura1{--a:#35d8ff} .toast.aura2{--a:#b79bff} .toast.aura3{--a:#ffe04d}
/* la racha de la cabecera también muestra el multiplicador */
.streak-x{padding:1px 5px;border-radius:6px;background:var(--a,var(--ink));color:var(--on);font:800 .7rem/1.3 var(--mono);font-style:normal}
.streak-x:empty{display:none}
.streak-guard{display:grid;place-items:center;margin-left:1px}                    /* el protector de racha guardado, junto a la racha */
.streak-guard[hidden]{display:none}
.streak .streak-guard svg{width:15px;height:15px;fill:color-mix(in srgb,currentColor 28%,transparent);stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.streak[data-aura="1"],.streak[data-aura="2"],.streak[data-aura="3"]{box-shadow:0 0 0 2px var(--a),0 0 var(--glow) -2px var(--a)}

/* ---------- escudo de descenso ---------- */
.shield-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 6px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font:700 .72rem/1.2 var(--mono);white-space:nowrap}
.shield-chip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.lp-row .shield-chip.on{color:var(--cyan);background:color-mix(in srgb,var(--deep) 80%,var(--cyan));box-shadow:inset 0 0 0 1px var(--cyan),0 0 12px -4px var(--cyan);font-weight:700}
.shield-chip.on svg{fill:color-mix(in srgb,var(--cyan) 22%,transparent)}
.shield-chip.off .mark{display:none}
.shield-chip.mini{padding:0;margin-left:6px;vertical-align:-3px;color:var(--cyan);box-shadow:none}
.toast.shield{--k:var(--cyan)}
.toast.shield svg{fill:color-mix(in srgb,var(--k) 25%,transparent);stroke:var(--k);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;animation:pulse .7s ease-in-out 3}
/* el escudo aparece sobre la tarjeta de liga cuando salva al jugador */
.lp-card{position:relative}
.lp-guard{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;opacity:0;pointer-events:none}
.lp-guard svg{width:96px;height:96px;fill:color-mix(in srgb,var(--cyan) 24%,transparent);stroke:var(--cyan);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 14px var(--cyan))}
.lp-card.saved{box-shadow:inset 0 0 0 2px var(--cyan),0 0 28px -8px var(--cyan)}
.lp-card.saved .lp-guard{animation:guard 1.8s cubic-bezier(.2,1.4,.3,1) forwards}
@keyframes guard{0%{opacity:0;transform:scale(.3)}16%{opacity:1;transform:scale(1.2)}30%{transform:scale(1)}72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}

/* ---------- mejor marca anterior (clases "ghost"): la mejor partida corre por la pista ----------
   --p (0 a 1) lo actualiza api.race() en cada cuadro: tiempo real transcurrido ÷ tiempo récord. */
.ghost-run{position:absolute;left:50%;bottom:14px;width:min(100% - 36px,560px);transform:translateX(-50%);display:grid;gap:6px;color:inherit;font:600 .78rem/1.2 var(--mono);text-align:left;pointer-events:none}
.ghost-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:1.3em}
.ghost-label{opacity:.85}
.ghost-tally{display:flex;flex:none;gap:5px}
.ghost-tally i{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.55}
.ghost-tally i.win{background:var(--green);box-shadow:0 0 0 1.5px var(--on);opacity:1}
.ghost-tally i.lose{background:var(--bad);box-shadow:0 0 0 1.5px var(--on);opacity:1}
.ghost-tally i.tie{background:currentColor;box-shadow:none;opacity:1}
.ghost-lane{--p:0;position:relative;height:36px;border-radius:99px;background:color-mix(in srgb,var(--void) 50%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 30%,transparent);overflow:hidden}
.ghost-lane::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cyan) 45%,transparent));transform-origin:left;transform:scaleX(var(--p))}      /* la estela */
.ghost-cat{position:absolute;top:50%;left:calc(var(--p)*(100% - 54px) + 4px);width:34px;margin-top:-17px;opacity:.8;filter:grayscale(1) brightness(1.8) drop-shadow(0 0 5px var(--cyan))}
.ghost-goal{position:absolute;top:6px;bottom:6px;right:9px;width:3px;border-radius:2px;background:currentColor;opacity:.6}
.ghost-lane[data-race="done"]{box-shadow:inset 0 0 0 2px #fff}
.ghost-lane[data-race="done"] .ghost-cat{opacity:1;filter:grayscale(1) brightness(2.2) drop-shadow(0 0 9px #fff)}
.ghost-lane[data-race="stopped"] .ghost-cat{opacity:.5}
.ghost-run.none .ghost-lane,.ghost-run.none .ghost-tally{display:none}

/* ---------- modo admin: botón flotante y panel del laboratorio (solo los ve el admin) ---------- */
.admin-fab{position:fixed;left:max(12px,env(safe-area-inset-left,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));z-index:25;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 14px 8px 11px;border:0;border-radius:999px;background:color-mix(in srgb,var(--panel) 92%,var(--cyan));color:var(--cyan);box-shadow:inset 0 0 0 2px var(--cyan),0 8px 24px -8px #000;font:700 .74rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.admin-fab svg,.admin-ico svg{width:18px;height:18px;fill:currentColor}
.admin-fab.lab{background:var(--orange);color:var(--on);box-shadow:0 0 22px -4px var(--orange),0 8px 24px -8px #000}
body[data-lab] .top{box-shadow:inset 0 -3px 0 var(--orange)}                 /* en modo prueba la cabecera lleva una línea naranja */
.admin-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:color-mix(in srgb,var(--deep) 70%,var(--orange));color:var(--orange)}
.admin-ico svg{width:26px;height:26px}
.modal-box.admin{--t:var(--orange)}
.modal-box.admin.wide{width:min(100%,640px);justify-items:stretch;gap:12px;text-align:left}
.modal-box.admin.wide h2{padding-right:40px}
.admin-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border:0;border-radius:50%;background:var(--tile);color:var(--ink);font:400 1.5rem/1 var(--body);cursor:pointer}
.admin-warn{padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--deep) 80%,var(--orange));color:var(--ink)!important;font-size:.86rem}
.admin-status{padding:10px 12px;border-radius:10px;background:var(--void);color:var(--ink)!important;font:500 .8rem/1.5 var(--mono)}
.admin-sec{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.admin-sec h3{color:var(--orange);font:700 .78rem/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase}
.admin-hint{font-size:.84rem;line-height:1.4}
.admin-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.admin-row .btn{--c:var(--cyan);min-height:40px;padding:8px 14px;font-size:.7rem;letter-spacing:.04em;text-transform:none}
.admin-in{min-height:40px;max-width:100%;padding:8px 10px;border:2px solid var(--line);border-radius:10px;background:var(--void);color:var(--ink);font:600 .86rem/1.2 var(--mono)}
.admin-in:focus{outline:none;border-color:var(--cyan)}
input.admin-in[type=number]{width:104px}
.admin-in.wide{width:100%}
.admin-key{display:grid;gap:8px}
.admin-key summary{color:var(--cyan);font-size:.86rem;cursor:pointer}
.admin-key[open] summary{margin-bottom:8px}
.admin-code{display:block;min-height:1.4em;padding:8px 10px;border-radius:10px;background:var(--void);color:var(--green);font:500 .72rem/1.4 var(--mono);overflow-wrap:anywhere;user-select:all}
.admin-code:empty{display:none}

/* ---------- resultado: veredicto, puntos y XP ---------- */
.result{width:100%}
.verdict{font:800 clamp(1.5rem,6vw,2.3rem)/1 var(--display);letter-spacing:.08em;text-transform:uppercase;animation:slam .5s cubic-bezier(.2,1.5,.4,1)}
.result.win .verdict{color:var(--green);text-shadow:0 0 28px color-mix(in srgb,var(--green) 60%,transparent)}
.result.lose .verdict{color:var(--bad);text-shadow:0 0 22px color-mix(in srgb,var(--bad) 45%,transparent)}
.result .score{font-size:clamp(1.5rem,5vw,2.2rem)}
.feat{padding:10px 16px;border-radius:14px;background:color-mix(in srgb,var(--deep) 80%,#ffe04d);box-shadow:inset 0 0 0 2px #ffe04d,0 0 26px -6px #ffe04d;color:#ffe04d;font:700 clamp(.95rem,3.2vw,1.15rem)/1.3 var(--display);text-wrap:balance}
@keyframes slam{from{transform:scale(1.9);opacity:0}}
.lp-card{--t:var(--green);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 14px;width:100%;padding:14px 16px;border-radius:16px;background:color-mix(in srgb,var(--deep) 90%,var(--t));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--t) 70%,transparent);text-align:left;transition:box-shadow .4s}
.lp-card .cat{width:62px;height:62px}
.lp-card.up{animation:lift .9s ease-out}
.lp-card.up .cat{animation:catpop .6s cubic-bezier(.3,1.5,.4,1)}
@keyframes lift{from{box-shadow:inset 0 0 0 2px var(--t),0 0 46px 2px var(--t)}}
.lp-main{display:grid;gap:7px;min-width:0}
.lp-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px}
.lp-name{font:700 .92rem/1.25 var(--display)}
.lp-delta{font:800 1.3rem/1 var(--mono);font-variant-numeric:tabular-nums}
.lp-delta.plus{color:var(--green)} .lp-delta.minus{color:var(--bad)} .lp-delta.zero{color:var(--dim)}
.lp-parts{color:var(--dim);font:500 .76rem/1.4 var(--mono)}
.lp-parts b{color:var(--ink)}
.xp-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.xp-gain{font:800 1rem/1 var(--mono);color:var(--violet)}
.quest-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;color:var(--dim);font-size:.9rem}

/* ---------- avisos flotantes ---------- */
.toasts{position:fixed;left:50%;top:calc(var(--top-h,64px) + 10px);z-index:30;display:grid;gap:8px;justify-items:center;width:min(92vw,420px);transform:translateX(-50%);pointer-events:none}
.toast{--k:var(--cyan);display:flex;align-items:center;gap:10px;max-width:100%;padding:11px 16px;border-radius:14px;background:color-mix(in srgb,var(--panel) 88%,var(--k));box-shadow:inset 0 0 0 1.5px var(--k),0 10px 30px -8px var(--void);color:var(--ink);font:600 .92rem/1.3 var(--body);pointer-events:auto;animation:toastin .35s cubic-bezier(.2,1.3,.4,1)}
.toast svg{flex:none;width:20px;height:20px;fill:var(--k)}
.toast .btn{min-height:34px;padding:6px 14px;--c:var(--k)}
.toast.fire{--k:var(--orange)} .toast.good{--k:var(--green)} .toast.bad{--k:var(--bad)} .toast.gold{--k:#ffe04d} .toast.xp{--k:var(--violet)}
.toast.out{opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .3s}
@keyframes toastin{from{opacity:0;transform:translateY(-16px) scale(.94)}}

/* ---------- ventanas ---------- */
.modal{position:fixed;inset:0;z-index:35;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--void) 82%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade .2s ease-out}
.modal-box{--t:var(--cyan);position:relative;display:grid;gap:14px;justify-items:center;width:min(100%,460px);max-height:calc(100vh - 32px);overflow:auto;padding:clamp(20px,5vw,30px);border-radius:22px;background:var(--deep);box-shadow:inset 0 0 0 2px var(--t),0 0 60px -14px var(--t);text-align:center;animation:rise .3s cubic-bezier(.2,1.3,.4,1)}
.modal-box h2{font:800 clamp(1.1rem,4vw,1.5rem)/1.2 var(--display)}
.modal-box p{color:var(--dim)}
.modal-box p b{color:var(--ink)}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.95)}}
.tier-up{overflow:hidden}
.tier-up .cat{position:relative;width:min(60vw,200px);height:min(60vw,200px);filter:drop-shadow(0 0 22px var(--t));animation:catpop .7s cubic-bezier(.3,1.5,.4,1)}
.tier-up h2{color:var(--t);text-shadow:0 0 22px color-mix(in srgb,var(--t) 60%,transparent)}
.rays{position:absolute;left:50%;top:132px;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:repeating-conic-gradient(color-mix(in srgb,var(--t) 22%,transparent) 0 9deg,transparent 9deg 18deg);-webkit-mask-image:radial-gradient(closest-side,#000 20%,transparent 78%);mask-image:radial-gradient(closest-side,#000 20%,transparent 78%);animation:spin 18s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* cofre: una cinta de premios que frena sobre el que te tocó */
.reel{position:relative;width:100%;height:112px;border-radius:14px;background:var(--void);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.reel-strip{position:absolute;left:0;top:10px;display:flex;gap:6px;will-change:transform}
.reel-tile{--t:var(--cyan);flex:none;display:grid;align-content:center;justify-items:center;gap:1px;width:88px;height:92px;border-radius:12px;background:color-mix(in srgb,var(--deep) 78%,var(--t));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--t) 80%,transparent);color:var(--t)}
.reel-tile b{font:800 1.25rem/1 var(--mono)}
.reel-tile small{font:700 .62rem/1 var(--body);letter-spacing:.14em}
.reel-tile span{margin-top:4px;color:var(--ink);font:600 .68rem/1 var(--body)}
.reel-tile .reel-ico{display:grid;place-items:center;width:34px;height:30px;margin:0;font:800 1.2rem/1 var(--body)}
.reel-tile .reel-ico svg{width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reel-tile.item .reel-ico svg{stroke:none;filter:drop-shadow(0 0 3px var(--ac,#fff))}
.reel-tile.won{box-shadow:inset 0 0 0 3px var(--t),0 0 26px 0 var(--t);animation:pulse .9s ease-in-out 3}
@keyframes pulse{50%{transform:scale(1.07)}}
.reel-mark{position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:var(--ink);box-shadow:0 0 12px var(--ink);pointer-events:none}
.reel.done .reel-mark{opacity:0;transition:opacity .3s}
.odds{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.prize{display:grid;gap:4px;justify-items:center}
.prize b{color:var(--t);font:800 clamp(1.8rem,8vw,2.6rem)/1 var(--display);text-shadow:0 0 26px color-mix(in srgb,var(--t) 60%,transparent);animation:slam .5s cubic-bezier(.2,1.5,.4,1)}
.prize span{color:var(--t);font:700 .8rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase}
.prize .pill.kib{margin-top:6px;color:var(--ink);font:700 .78rem/1.2 var(--body);letter-spacing:.02em;text-transform:none}
.fx-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:40;pointer-events:none}


/* ---------- mascota: la pantalla "Mi gato" ----------
   Tres bloques, como en el boceto: medidores arriba, el cuarto al centro y los cuidados abajo.
   El cuarto es una imagen (--pet-room) y todo lo que va encima se ubica en % de su tamaño, así escala entero.
   --x / --y: dónde tiene las patas el gato (% del cuarto) · --h: su alto (% del alto del cuarto) · --ratio: ancho/alto de su imagen */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pet{display:grid;justify-items:center}
#pet-body{display:grid;justify-items:center;width:100%}
/* El ancho sale del alto de la ventana (para que en un monitor todo quepa sin bajar), con un mínimo de 460 px.
   Como ese ancho no depende del de la ventana, lo de adentro se acomoda según el ancho DEL BLOQUE (container queries, unidades cqw):
   un portátil bajito recibe la misma distribución compacta que un teléfono, en vez de seis botones apretados. */
.pet-wrap{--t:var(--green);container:pet/inline-size;display:grid;gap:12px;width:min(100%,760px,max(460px,calc((100vh - var(--top-h,64px) - 340px)*1.393)))}
.pet-hud{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 12px;padding:12px;border:2px solid transparent;border-radius:20px;background:linear-gradient(var(--deep),var(--deep)) padding-box,linear-gradient(100deg,var(--cyan),var(--violet) 55%,var(--pink)) border-box;box-shadow:0 0 28px -10px var(--cyan),0 0 60px -26px var(--violet)}
.pet-top{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-width:0}
.pet-name{font:800 1.05rem/1.2 var(--display);font-size:clamp(1rem,3.4cqw,1.2rem);color:var(--t);text-shadow:0 0 14px color-mix(in srgb,var(--t) 55%,transparent);overflow-wrap:anywhere}
.pet-rank{color:var(--dim);font:600 .74rem/1.2 var(--mono)}
.pet-feel{flex:1 1 140px;color:var(--ink);font-size:.9rem;line-height:1.3}
.pill.kib{--k:#ffb13d;color:var(--ink);white-space:nowrap}
.pill.kib svg{width:14px;height:14px;fill:#ffb13d}
/* fragmentos estelares (la moneda de la tienda) y protector de racha */
.pill.coin{--k:#7fe9ff;color:var(--ink);white-space:nowrap}
.pill.coin svg,.coin-ico{width:14px;height:14px;fill:color-mix(in srgb,#7fe9ff 35%,transparent);stroke:#7fe9ff;stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 0 3px #35d8ff)}
.pill.guard{--k:#ff9d3d;color:var(--ink)} .pill.guard svg{width:14px;height:14px;fill:none;stroke:#ff9d3d;stroke-width:2}
.pill.guard.off{--k:var(--line);color:var(--dim)} .pill.guard.off svg{stroke:var(--dim)}
.shop{display:grid;gap:10px;padding:12px;border-radius:14px;background:color-mix(in srgb,var(--deep) 82%,#35d8ff);box-shadow:inset 0 0 0 1px color-mix(in srgb,#35d8ff 45%,transparent)}
.shop-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.shop-top b{font:800 1.05rem/1 var(--display);color:#bff4ff}
.shop small{color:var(--dim);font:500 .74rem/1.35 var(--body)}
.shop-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.shop-row > span{flex:1 1 180px;font:600 .82rem/1.3 var(--body)}
.style-item .price{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--deep) 70%,#35d8ff);color:#bff4ff;font:800 .66rem/1.2 var(--body)}
.style-item .price svg{width:11px;height:11px;fill:none;stroke:#7fe9ff;stroke-width:2}
.style-item.buyable{border-color:color-mix(in srgb,#35d8ff 55%,var(--line))}
.style-item.buyable .style-pre{opacity:.75;filter:none}
.style-item.arm{border-color:#ffe04d;box-shadow:0 0 16px -5px #ffe04d}
.style-item.arm .price{background:#ffe04d;color:#1b1400}
/* ---------- perfil ---------- */
.profile{display:grid;gap:18px}
#profile-body{display:grid;gap:18px}
.prof-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(14px,3vw,26px);padding:clamp(16px,3vw,24px);border-radius:22px;background:var(--panel);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t) 50%,var(--line)),0 0 40px -18px var(--t)}
.prof-cat{width:clamp(80px,16vw,130px);height:clamp(80px,16vw,130px);--gk:1.2}
.prof-who{display:grid;gap:8px;min-width:0}
.prof-who h1{font:800 clamp(1.3rem,4vw,2rem)/1.1 var(--display);overflow-wrap:anywhere}
.prof-rank{color:var(--t);font:700 .9rem/1.3 var(--body)}
.prof-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.prof-stat{display:grid;gap:2px;padding:12px 14px;border-radius:16px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.prof-stat b{font:800 1.3rem/1.1 var(--mono);color:var(--ink)}
.prof-stat span{color:var(--dim);font:600 .74rem/1.2 var(--body)}
.prof-tabs{display:flex;gap:8px}
.prof-tab{flex:1;min-height:42px;padding:8px 14px;border:0;border-radius:999px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);color:var(--dim);font:800 .76rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.prof-tab[aria-selected="true"]{background:color-mix(in srgb,var(--deep) 70%,var(--violet));box-shadow:inset 0 0 0 2px var(--violet),0 0 18px -6px var(--violet);color:var(--ink)}
/* logros: icono en un círculo del color de su nivel (bronce, plata, oro, platino); los que faltan, apagados con su avance */
.ach-panel{display:grid;gap:18px}
.ach-group h3{margin-bottom:8px;color:var(--dim);font:800 .74rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.ach{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.ach-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:color-mix(in srgb,var(--deep) 80%,var(--k));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--k) 35%,transparent);color:color-mix(in srgb,var(--k) 40%,var(--dim))}
.ach-ico svg{width:24px;height:24px}
.ach.done .ach-ico{background:color-mix(in srgb,var(--deep) 55%,var(--k));box-shadow:inset 0 0 0 2px var(--k),0 0 18px -4px var(--k);color:var(--k)}
.ach.done .ach-ico svg{filter:drop-shadow(0 0 4px var(--k))}
.ach.done{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k) 45%,var(--line))}
.ach-txt{display:grid;gap:3px;min-width:0}
.ach-txt b{font:800 .9rem/1.2 var(--body)}
.ach-txt span{color:var(--dim);font:500 .78rem/1.3 var(--body)}
.ach-txt small{color:var(--k);font:700 .7rem/1.2 var(--body)}
.ach:not(.done) .ach-txt b{color:color-mix(in srgb,var(--ink) 70%,var(--dim))}
.ach-prog{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
.ach-prog small{color:var(--dim)}
.ach-toast{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--deep) 50%,var(--k));color:var(--k)}
.ach-toast svg{width:16px;height:16px}
/* álbum: una fila por gato, sus tres cartas */
.album{display:grid;gap:14px}
.album-note{color:var(--dim);font:500 .86rem/1.4 var(--body)}
.album-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.album-top .lp-bar{flex:1 1 200px}
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.album-row{display:grid;gap:8px;padding:12px;border-radius:18px;background:var(--panel);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t) 30%,var(--line))}
.album-row h3{color:var(--t);font:800 .8rem/1.2 var(--body);letter-spacing:.06em}
.album-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.album-slot{display:grid;align-content:start;gap:6px;justify-items:center;min-width:0}
.album-slot .cc{width:100%}
.album-slot .sell{min-height:28px;max-width:100%;padding:3px 8px;font-size:.6rem;letter-spacing:.02em}
.album-slot .sell .cost-coin{margin-left:0}
/* la carta: marco del color de su rareza; la legendaria con brillo que la recorre */
.cc{--rc:#93c4ff;position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:4px;width:100%;max-width:120px;aspect-ratio:5/7;padding:7px 6px 8px;border-radius:12px;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--t) 24%,#0b1222),#070b16 80%);box-shadow:inset 0 0 0 2px var(--rc),0 0 16px -6px var(--rc);overflow:hidden;text-align:center}
.cc-rar{color:var(--rc);font:800 .54rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.cc-art{display:grid;place-items:center;min-height:0;overflow:hidden}
.cc-art .card-art{width:100%;max-height:100%;transform:scale(1.75);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--t) 70%,transparent))}
.cc.r-r .cc-art .card-art{transform:scale(1.45)}
.cc.r-l .cc-art .card-art{transform:scale(1.55)}
.cc-art .cat:not(.cat-anim){width:80%;aspect-ratio:1;height:auto}
.card-pic{width:100%;max-height:100%;aspect-ratio:15/16;border-radius:8px;background:#070b16 url("gatos/cartas.webp") calc(var(--cx) * 12.5%) calc(var(--cy) * 50%)/900% 300% no-repeat;box-shadow:0 0 0 1px color-mix(in srgb,var(--rc) 45%,transparent),0 0 12px -4px var(--rc)}
.cc-name{color:var(--ink);font:700 .6rem/1.15 var(--body)}
.cc-n{position:absolute;top:5px;right:6px;padding:1px 6px;border-radius:999px;background:var(--rc);color:var(--on);font:800 .6rem/1.3 var(--mono)}
.cc.r-r{background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--rc) 22%,#0b1222),#070b16 80%)}
.cc.r-l{background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--rc) 30%,#0b1222),#070b16 80%);box-shadow:inset 0 0 0 2px var(--rc),0 0 22px -4px var(--rc)}
.cc.r-l::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.28) 48%,rgba(255,224,77,.2) 52%,transparent 60%);animation:holo 3.2s ease-in-out infinite;pointer-events:none}
@keyframes holo{from{transform:translateX(-45%)}to{transform:translateX(45%)}}
.cc.missing{background:#070b16;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--rc) 25%,var(--line))}
.cc.missing .card-art,.cc.missing .cat{filter:brightness(0) drop-shadow(0 0 1px color-mix(in srgb,var(--rc) 70%,transparent))!important;opacity:.7}
.cc.missing::after{display:none}
.cc.missing .cc-name{color:var(--dim)}
.cc.fresh{animation:catpop .7s cubic-bezier(.3,1.5,.4,1)}
.chest-card{display:flex;align-items:center;gap:12px;margin-top:10px;color:var(--ink);font:500 .84rem/1.35 var(--body);text-align:left}
.chest-card .cc{width:84px;flex:none}
@media (prefers-reduced-motion:reduce){.cc.r-l::after,.cc.fresh{animation:none!important}}
@media (max-width:560px){.prof-head{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}.prof-who .xp-line{justify-content:center!important}.album-grid{grid-template-columns:minmax(0,1fr)}}

/* misiones de la semana: a lo ancho del panel */
.dash-card.weekly{grid-column:1/-1;box-shadow:inset 0 0 0 1px color-mix(in srgb,#35d8ff 40%,var(--line))}
.weekly .quest.claimed small{color:var(--green)}
.weekly .reward{display:inline-flex;align-items:center;gap:3px;color:#bff4ff;font:700 .7rem/1 var(--body)}
.weekly .reward svg{width:11px;height:11px;fill:none;stroke:#7fe9ff;stroke-width:2}
.pet-needs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;gap:clamp(4px,1.6cqw,12px)}
.need{--k:var(--cyan);--v:0;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:5px;min-width:0}
.need[data-need="hunger"]{--k:#ff5a6e} .need[data-need="health"]{--k:#b48bff} .need[data-need="energy"]{--k:#ffe04d} .need[data-need="mood"]{--k:#ff5fc8}
.need-ring{position:relative;display:grid;place-items:center;width:min(100%,58px);aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--k) calc(var(--v)*1turn),color-mix(in srgb,var(--k) 16%,var(--deep)) 0);box-shadow:0 0 14px -4px var(--k)}
.need-ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--deep)}
.need-ring > *{position:relative;width:60%;height:60%;color:var(--k)}
.need-ring svg{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px var(--k))}
.need-ring svg .fill{fill:currentColor;stroke:none}
.need-ring .pet-face.sprite{width:84%;height:84%}
.need-label{color:var(--ink);font:700 .6rem/1 var(--body);font-size:clamp(.56rem,2cqw,.68rem);letter-spacing:.1em;text-transform:uppercase}
.need-bar{width:100%;max-width:96px;height:7px;border-radius:99px;background:var(--tile);overflow:hidden}
.need-bar i{display:block;height:100%;border-radius:inherit;background:var(--k);box-shadow:0 0 8px var(--k);transform-origin:left;transform:scaleX(var(--v));transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.need.low .need-ring{animation:needlow 1.3s ease-in-out infinite}
.need.low .need-label{color:var(--k)}
.need.up .need-ring{animation:needup .7s ease-out}
@keyframes needlow{50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--k) 45%,transparent),0 0 18px 0 var(--k)}}
@keyframes needup{from{transform:scale(1.25);box-shadow:0 0 26px 2px var(--k)}}
.pet-level{display:grid;justify-items:center;gap:3px;max-width:100px;max-width:clamp(92px,26cqw,190px);text-align:center}
.pet-star{position:relative;display:grid;place-items:center;align-content:center;width:60px;width:clamp(56px,15cqw,76px);aspect-ratio:1}
.pet-star svg{position:absolute;inset:0;width:100%;height:100%;fill:color-mix(in srgb,#ffe04d 13%,var(--deep));stroke:#ffe04d;stroke-width:2.2;stroke-linejoin:round;filter:drop-shadow(0 0 6px color-mix(in srgb,#ffe04d 70%,transparent))}
.pet-star small,.pet-star b{position:relative;color:#ffe04d}
.pet-star small{margin-top:14%;font:800 .4rem/1 var(--body);font-size:clamp(.36rem,1.3cqw,.46rem);letter-spacing:.12em}
.pet-star b{font:800 1rem/1 var(--display);font-size:clamp(.95rem,3.4cqw,1.25rem)}
.pet-xp{font:700 .64rem/1.25 var(--mono);font-size:clamp(.6rem,2cqw,.7rem)}
.pet-xp span{display:block;color:var(--dim);font-weight:500;font-size:.9em}

.pet-room{position:relative;aspect-ratio:896/643;border-radius:20px;overflow:hidden;background:#0a0f24;box-shadow:0 0 34px -12px var(--violet);touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.pet-room::after{content:"";position:absolute;inset:0;z-index:12;border-radius:inherit;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--cyan) 65%,transparent),inset 0 0 40px -18px var(--violet);pointer-events:none}
.pet-bg,.pet-stage{position:absolute;inset:0}
.pet-bg{background:var(--pet-room) center/100% 100% no-repeat}
.pet-bedfront{position:absolute;left:6.696%;top:30.171%;width:42.411%;height:25.505%;z-index:2;background:var(--pet-bed) center/100% 100% no-repeat;pointer-events:none}
.pet-room[data-room="aurora"] :is(.pet-bg,.pet-bedfront,.pet-bowlfront){filter:hue-rotate(-95deg) saturate(1.1)}
.pet-room[data-room="sunset"] :is(.pet-bg,.pet-bedfront,.pet-bowlfront){filter:hue-rotate(72deg) saturate(1.1)}
.pet-room[data-room="abyss"] :is(.pet-bg,.pet-bedfront,.pet-bowlfront){filter:saturate(.28) brightness(.82) contrast(1.15)}
.pet-room[data-room="royal"] :is(.pet-bg,.pet-bedfront,.pet-bowlfront){filter:sepia(.9) saturate(2.3) hue-rotate(-8deg) brightness(.95)}
.pet-room[data-room="forest"] :is(.pet-bg,.pet-bedfront,.pet-bowlfront){filter:hue-rotate(-140deg) saturate(1.25) brightness(.9)}
.pet-room[data-room="candy"] :is(.pet-bg,.pet-bedfront,.pet-bowlfront){filter:hue-rotate(40deg) saturate(1.5) brightness(1.12)}
.pet-room[data-room="night"] :is(.pet-bg,.pet-bedfront,.pet-bowlfront){filter:saturate(.6) brightness(.6) hue-rotate(20deg) contrast(1.25)}
.pet-actor{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);z-index:3;height:calc(var(--h)*1%);aspect-ratio:var(--ratio);padding:0;border:0;background:none;color:inherit;transform:translate(-50%,-100%);cursor:pointer;transition:left var(--walk,.9s) ease-in-out,top var(--walk,.9s) ease-in-out;-webkit-tap-highlight-color:transparent}
.pet-actor:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:14px}
.pet-shadow{position:absolute;left:6%;right:6%;bottom:-4%;height:10%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,10,.6),transparent)}
.pet-body,.pet-flip,.pet-look,.pet-skin{position:absolute;inset:0}
.pet-body{transform-origin:50% 100%;animation:petbreathe 3.4s ease-in-out infinite}
.pet-flip{transition:transform .22s}
.pet-actor[data-flip] .pet-flip{transform:scaleX(-1)}
.pet-skin{--gk:.8}
.pet-reflect{position:absolute;left:0;right:0;top:98%;height:100%;transform:scaleY(-1);opacity:.2;-webkit-mask-image:linear-gradient(to top,#000,transparent 52%);mask-image:linear-gradient(to top,#000,transparent 52%)}
.pet-look[data-color="ice"]{filter:sepia(1) saturate(5) hue-rotate(150deg) brightness(1.1)}
.pet-look[data-color="emerald"]{filter:sepia(1) saturate(5) hue-rotate(72deg)}
.pet-look[data-color="ruby"]{filter:sepia(1) saturate(9) hue-rotate(-50deg) brightness(.9)}
.pet-look[data-color="gold"]{filter:sepia(1) saturate(4) hue-rotate(5deg) brightness(1.15)}
.pet-look[data-color="ghost"]{filter:grayscale(1) brightness(1.7) contrast(1.1)}
.pet-look[data-color="violet"]{filter:sepia(1) saturate(5) hue-rotate(220deg) brightness(.95)}
.pet-look[data-color="coral"]{filter:sepia(1) saturate(6) hue-rotate(-30deg) brightness(1.05)}
.pet-look[data-color="mint"]{filter:sepia(1) saturate(3) hue-rotate(110deg) brightness(1.15)}
.pet-look[data-color="shadow"]{filter:grayscale(1) brightness(.62) contrast(1.45)}
.pet-look[data-color="prism"]{filter:sepia(1) saturate(5);animation:prism 6s linear infinite}     /* va pasando por todos los colores */
@keyframes prism{to{filter:sepia(1) saturate(5) hue-rotate(360deg)}}
.pet-look[data-tone]{filter:hue-rotate(calc(var(--tone)*1deg))}                 /* el gato acurrucado toma el color del gato del rango */
@keyframes petbreathe{50%{transform:scale(.994,1.022)}}
@keyframes pethop{30%{transform:translateY(-13%) scale(.97,1.05)}62%{transform:translateY(0) scale(1.04,.95)}}
@keyframes petwalk{50%{transform:translateY(-3.5%) rotate(1.6deg)}}
@keyframes peteat{50%{transform:rotate(-4deg) translateY(2.5%)}}
@keyframes petpurr{20%{transform:rotate(-3deg) scale(1.03)}50%{transform:rotate(3deg) scale(1.045)}80%{transform:rotate(-2deg) scale(1.02)}}
@keyframes petshiver{25%{transform:translateX(-2.2%) rotate(-1.2deg)}75%{transform:translateX(2.2%) rotate(1.2deg)}}
@keyframes petsleep{50%{transform:scale(1.025,1.05)}}
.pet-actor[data-pose="orb"] .pet-body{animation:float 5s ease-in-out infinite}
.pet-actor.walk .pet-body{animation:petwalk .3s ease-in-out infinite}
.pet-actor.hop .pet-body{animation:pethop .5s ease-out}
.pet-actor.eat .pet-body{animation:peteat .42s ease-in-out infinite}
.pet-actor.purr .pet-body{animation:petpurr .9s ease-in-out}
.pet-actor.shiver .pet-body{animation:petshiver .22s linear infinite}
.pet-room[data-mode="sleep"] .pet-body,.pet-room[data-mode="curl"] .pet-body{animation:petsleep 4.6s ease-in-out infinite}
.pet-room[data-mode="sleep"] .pet-shadow,.pet-room[data-mode="sleep"] .pet-reflect{display:none}
.pet-room[data-mode="sleep"] .pet-bedfront{z-index:4}                       /* dormido, el frente de la cama lo tapa: queda adentro */
.pet-bowlfront{position:absolute;left:4.018%;top:77.449%;width:25%;height:16.796%;z-index:4;display:none;background:var(--pet-bowl) center/100% 100% no-repeat;pointer-events:none}
.pet-room[data-mode="eat"] .pet-bowlfront{display:block}                     /* comiendo, el borde del plato le tapa el hocico: come de adentro */
/* parpadeo: dos párpados del color del pelo que tapan los ojos un instante (solo en los gatos con ojos declarados) */
.pet-lids i{position:absolute;left:calc(var(--lx)*1%);top:calc(var(--ly)*1%);width:calc(var(--lw)*1%);height:calc(var(--lh)*1%);border-radius:50%;background:#02040b;transform:translate(-50%,-50%) scaleY(0);animation:petblink 5.2s infinite}
.pet-lids i::after{content:"";position:absolute;left:10%;right:10%;top:30%;height:60%;border-top:2px solid var(--eye,#35e0ff);border-radius:50% 50% 0 0/100% 100% 0 0;filter:drop-shadow(0 0 2px var(--eye,#35e0ff))}      /* el ojo cerrado: un arco */
@keyframes petblink{0%,93%,100%{transform:translate(-50%,-50%) scaleY(0)}95%,98%{transform:translate(-50%,-50%) scaleY(1)}}
.pet-actor.purr .pet-lids i,.pet-actor.eat .pet-lids i{animation:none;transform:translate(-50%,-50%) scaleY(1)}
/* gatos con hoja de animación (PET_ANIM): cada cuadro es una celda del atlas. --fc / --fr (columna y fila) los pone petUi.anim en .pet-look,
   así el gato y su reflejo cambian juntos. --foot: a qué altura de la celda están las patas (fracción): ahí se apoya en el piso */
.cat-anim{background-image:var(--sheet);background-size:calc(var(--cols)*100%) calc(var(--rows)*100%);background-position:calc(var(--fc,0)/(var(--cols) - 1)*100%) calc(var(--fr,0)/(var(--rows) - 1)*100%)}
.pet-actor[data-pose="anim"]{transform:translate(-50%,calc(var(--foot)*-100%));transition-timing-function:cubic-bezier(.3,.12,.7,.88)}
.pet-actor[data-pose="anim"] .pet-body{transform-origin:50% calc(var(--foot)*100%)}
.pet-actor[data-pose="anim"]:is(.walk,.eat) .pet-body{animation:petbreathe 3.4s ease-in-out infinite}      /* el paso y el bocado ya vienen dibujados */
.pet-actor[data-pose="anim"].walk{transition-timing-function:linear,linear}         /* a paso parejo: las patas van a ritmo fijo, así que acelerar y frenar las haría patinar */
.pet-actor[data-pose="anim"] .pet-flip{transition:none}                               /* se da vuelta de una (el cuadro anterior se desvanece encima): sin aplastarse a lo ancho */
.pet-actor[data-pose="anim"].walk .pet-acc{transition:left 60ms linear,top 60ms linear,transform 60ms linear}   /* al caminar, sombrero y collar siguen la cabeza sin saltitos */
.pet-actor[data-pose="anim"] .pet-shadow{left:31%;right:31%;bottom:calc((1 - var(--foot))*100% - 4%)}
.pet-actor[data-pose="anim"] .pet-reflect{top:calc((2*var(--foot) - 1.02)*100%)}
.pet-look .cat.pet-ghost{animation:petghost .2s ease-out forwards}                 /* el cuadro anterior se desvanece al cambiar de pose */
@keyframes petghost{to{opacity:0}}
.pet-actor[data-pose="anim"] .pet-acc.hide{opacity:0}
/* accesorios: --ax/--ay dónde se apoyan (% del gato), --rot su giro, --as su tamaño (% del ancho del gato).
   En los gatos animados los pone petUi.frame en cada cuadro, así siguen a la cabeza */
.pet-acc{position:absolute;left:calc(var(--ax)*1%);top:calc(var(--ay)*1%);width:calc(var(--as)*1%);aspect-ratio:1;pointer-events:none}
.pet-acc.head{transform:translate(-50%,-100%) rotate(calc(var(--rot)*1deg));transform-origin:50% 100%}
.pet-acc.neck{transform:translate(-50%,-15%) rotate(calc(var(--rot)*1deg));transform-origin:50% 15%}
/* el collar de perfil: la tira cruza el cuello desde la nuca (su punto de apoyo) hasta la garganta, donde cuelga el dije */
.pet-acc.neck.side{transform:translate(-50%,-6%) rotate(calc(var(--rot)*1deg));transform-origin:50% 6%}
.pet-acc.neck > .s,.pet-acc.neck.side > .f{display:none}
.pet-acc.neck[data-acc="cape"]{z-index:-1}                                   /* la capa cuelga detrás del gato */
.pet-acc.neck.side > .s{display:block}
.pet-acc svg,.style-pre svg{width:100%;height:100%;overflow:visible;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px var(--ac,#fff))}
/* auras extra */
.pet-aura{position:absolute;inset:-10% -22% 0;pointer-events:none}
.pet-aura i{position:absolute;left:calc(var(--px)*1%);top:calc(var(--py)*1%);font-style:normal;animation-delay:calc(var(--d)*-1s)}
.pet-aura[data-aura="fireflies"] i{width:6px;height:6px;border-radius:50%;background:#e2ff7a;box-shadow:0 0 9px 2px #b6ff4d;animation:firefly 5s ease-in-out infinite;animation-delay:calc(var(--d)*-1s)}
.pet-aura[data-aura="stars"] i::before{content:"✦";color:#f1fbff;font:12px/1 system-ui;font-size:clamp(9px,2.4cqw,15px);text-shadow:0 0 7px #7fe0ff}
.pet-aura[data-aura="stars"] i{animation:twinkle 2.6s ease-in-out infinite;animation-delay:calc(var(--d)*-1s)}
.pet-aura[data-aura="hearts"] i::before{content:"♥";color:#ff8ad6;font:12px/1 system-ui;font-size:clamp(9px,2.3cqw,14px);text-shadow:0 0 7px #ff5fc8}
.pet-aura[data-aura="hearts"] i{animation:heartrise 3.6s ease-in infinite;animation-delay:calc(var(--d)*-1s)}
.pet-aura[data-aura="flames"] i{top:auto;bottom:-1%;width:7%;height:12%;border-radius:50% 50% 50% 50%/64% 64% 36% 36%;background:linear-gradient(#fff6c2,#ffb13d 45%,#ff5a3d);filter:drop-shadow(0 0 6px #ff8a3d);opacity:.9;transform-origin:50% 100%;animation:flame .5s ease-in-out infinite alternate;animation-delay:calc(var(--d)*-.2s)}
.pet-aura[data-aura="comet"]{inset:4% -16% 8%;animation:spin 3.6s linear infinite}
.pet-aura[data-aura="comet"] i{left:100%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px #7fe0ff,0 -9px 10px 0 rgba(127,224,255,.55),0 -18px 12px -1px rgba(127,224,255,.3)}
.pet-aura[data-aura="bubbles"] i{width:9px;height:9px;border-radius:50%;background:rgba(160,220,255,.15);box-shadow:inset 0 0 0 1.5px #cfefff,inset 2px -2px 4px -1px #fff;animation:bubblerise 4.2s ease-in infinite;animation-delay:calc(var(--d)*-1s)}
.pet-aura[data-aura="notes"] i::before{content:"♪";color:#ffe04d;font:13px/1 system-ui;font-size:clamp(10px,2.6cqw,16px);text-shadow:0 0 7px #ffb13d}
.pet-aura[data-aura="notes"] i:nth-child(even)::before{content:"♫"}
.pet-aura[data-aura="notes"] i{animation:heartrise 3.2s ease-in infinite;animation-delay:calc(var(--d)*-1s)}
/* Aura de Mecenas (Ko-fi): corazones dorados y tazas de café estelar que suben */
.pet-aura[data-aura="mecenas"] i::before{content:"♥";color:#ffd54d;font:12px/1 system-ui;font-size:clamp(9px,2.4cqw,15px);text-shadow:0 0 8px #ffb13d,0 0 2px #fff}
.pet-aura[data-aura="mecenas"] i:nth-child(3n)::before{content:"☕";text-shadow:0 0 8px #ffd54d}
.pet-aura[data-aura="mecenas"] i{animation:heartrise 3.8s ease-in infinite;animation-delay:calc(var(--d)*-1s)}
.pet-aura[data-aura="snow"] i::before{content:"❄";color:#eef7ff;font:11px/1 system-ui;font-size:clamp(9px,2.2cqw,14px);text-shadow:0 0 6px #9fd8ff}
.pet-aura[data-aura="snow"] i{animation:snowfall 4.6s linear infinite;animation-delay:calc(var(--d)*-1s)}
.pet-aura[data-aura="runes"] i::before{content:"ᛟ";color:#7fffd4;font:13px/1 system-ui;font-size:clamp(10px,2.6cqw,16px);text-shadow:0 0 8px #3dff9a}
.pet-aura[data-aura="runes"] i:nth-child(3n+1)::before{content:"ᚱ"} .pet-aura[data-aura="runes"] i:nth-child(3n+2)::before{content:"ᛉ"}
.pet-aura[data-aura="runes"] i{animation:twinkle 3.4s ease-in-out infinite;animation-delay:calc(var(--d)*-1s)}
.pet-aura[data-aura="galaxy"]{inset:6% -10% 14%;animation:spin 9s linear infinite}
.pet-aura[data-aura="galaxy"] i{width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--gc,#fff);box-shadow:0 0 9px 2px var(--gc,#fff)}
.pet-aura[data-aura="galaxy"] i:nth-child(1){--gc:#ff8ad6} .pet-aura[data-aura="galaxy"] i:nth-child(2){--gc:#7fe0ff} .pet-aura[data-aura="galaxy"] i:nth-child(3){--gc:#ffe04d} .pet-aura[data-aura="galaxy"] i:nth-child(4){--gc:#b48bff}
@keyframes bubblerise{0%{transform:translateY(30%) scale(.4);opacity:0}20%{opacity:1}100%{transform:translateY(-420%) translateX(6px) scale(1.15);opacity:0}}
@keyframes snowfall{0%{transform:translateY(-60%) rotate(0);opacity:0}15%{opacity:1}100%{transform:translateY(380%) rotate(160deg);opacity:0}}
@keyframes firefly{0%,100%{transform:translate(0,0);opacity:.15}25%{transform:translate(10px,-14px);opacity:1}50%{transform:translate(-8px,-22px);opacity:.45}75%{transform:translate(-14px,-6px);opacity:1}}
@keyframes twinkle{0%,100%{transform:scale(.4) rotate(0);opacity:.2}50%{transform:scale(1.15) rotate(40deg);opacity:1}}
@keyframes heartrise{0%{transform:translateY(40%) scale(.5);opacity:0}25%{opacity:1}100%{transform:translateY(-320%) scale(1.1);opacity:0}}
/* globo con su cara, sobre la cabeza */
.pet-bubble{position:absolute;left:min(93%,calc((var(--x) + var(--half,10))*1% + 5%));top:max(24%,calc((var(--y) - var(--h))*1% + 7%));z-index:9;display:grid;place-items:center;width:clamp(36px,10.5%,66px);aspect-ratio:1;padding:5px;border-radius:50%;background:color-mix(in srgb,var(--deep) 92%,var(--t));box-shadow:inset 0 0 0 2px var(--t),0 0 16px -4px var(--t);color:var(--t);opacity:0;transform:translate(-50%,-50%) scale(.5);transition:opacity .25s,transform .3s cubic-bezier(.3,1.5,.4,1),left var(--walk,.9s) ease-in-out,top var(--walk,.9s) ease-in-out;pointer-events:none}
.pet-bubble.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.pet-bubble .pet-face{width:100%}
.pet-zzz{position:absolute;left:calc(var(--x)*1% + 6%);top:calc((var(--y) - var(--h))*1%);z-index:10;display:none;color:#cfe3ff;font:800 1rem/1 var(--display);font-size:clamp(.8rem,3cqw,1.3rem);text-shadow:0 0 10px var(--cyan);pointer-events:none}
.pet-room[data-mode="sleep"] .pet-zzz,.pet-room[data-mode="curl"] .pet-zzz{display:block}
.pet-zzz i{position:absolute;font-style:normal;opacity:0;animation:zzz 3s ease-out infinite}
.pet-zzz i:nth-child(2){animation-delay:1s} .pet-zzz i:nth-child(3){animation-delay:2s}
@keyframes zzz{0%{transform:translate(0,0) scale(.5);opacity:0}20%{opacity:1}100%{transform:translate(120%,-260%) scale(1.3);opacity:0}}
.pet-fx{position:absolute;inset:0;z-index:10;pointer-events:none}
.pet-fx i{position:absolute;left:calc(var(--px)*1%);top:calc(var(--py)*1%);color:var(--pc,#ff8ad6);font:18px/1 system-ui;font-size:clamp(12px,3.4cqw,24px);font-style:normal;text-shadow:0 0 8px currentColor;transform:translate(-50%,-50%);animation:fxrise var(--pt,1.2s) ease-out forwards}
.pet-fx i.pop{width:clamp(8px,2.6%,20px);aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 2px #cfefff,inset 3px -3px 6px -2px #fff;background:rgba(160,220,255,.16)}
@keyframes fxfade{from{opacity:1}to{opacity:0}}
@keyframes fxrise{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}18%{opacity:1}100%{transform:translate(calc(-50% + var(--dx,0px)),calc(-50% - var(--dy,60px))) scale(1.15);opacity:0}}
.pet-dim{position:absolute;inset:0;z-index:8;background:radial-gradient(62% 58% at 51% 4%,rgba(3,6,20,.12) 28%,rgba(3,6,20,.74) 78%);opacity:0;transition:opacity 1s;pointer-events:none}
.pet-room[data-mode="sleep"] .pet-dim{opacity:1}
.pet-room:not([data-mode="play"]) .pet-yarn{transition:left .5s ease-out,top .5s ease-out}
.pet-yarn{position:absolute;left:calc(var(--yx,79.4)*1%);top:calc(var(--yy,82.4)*1%);z-index:5;width:22.77%;aspect-ratio:204/154;background:var(--pet-yarn) center/contain no-repeat;transform:translate(-44%,-52%) rotate(calc(var(--yr,0)*1deg));transform-origin:44% 52%;pointer-events:none}
/* la bañera: tapa al gato de los hombros para abajo (queda "adentro", entre la espuma) */
.pet-tub{position:absolute;left:50%;top:56.4%;z-index:5;width:46%;aspect-ratio:640/343;background:var(--pet-tub) center/contain no-repeat;transform:translate(-50%,30%);opacity:0;transition:opacity .35s,transform .45s cubic-bezier(.2,1.3,.4,1);pointer-events:none;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--cyan) 45%,transparent))}
.pet-room[data-mode="bath"] .pet-tub{opacity:1;transform:translate(-50%,0)}
/* en la tina se mece despacio, a gusto (antes temblaba) */
.pet-actor.soak .pet-body{animation:petsoak 3.8s ease-in-out infinite}
@keyframes petsoak{25%{transform:rotate(-2.2deg) translateY(-.8%)}50%{transform:translateY(.4%)}75%{transform:rotate(2.2deg) translateY(-.8%)}}
.pet-room[data-mode="bath"],.pet-room[data-mode="play"]{cursor:crosshair;touch-action:none}
.pet-say{position:absolute;left:50%;top:9px;z-index:11;max-width:calc(100% - 20px);padding:6px 13px;border-radius:14px;background:rgba(7,11,22,.82);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:600 .78rem/1.3 var(--body);font-size:clamp(.72rem,2.5cqw,.86rem);text-align:center;transform:translateX(-50%);pointer-events:none}
.pet-say:empty{display:none}
.pet-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pet-btn{--k:var(--cyan);display:grid;justify-items:center;align-content:center;gap:5px;min-height:64px;min-width:0;padding:9px 4px 8px;border:2px solid var(--k);border-radius:16px;background:color-mix(in srgb,var(--deep) 88%,var(--k));color:var(--ink);font:700 .78rem/1.1 var(--body);cursor:pointer;box-shadow:0 0 18px -8px var(--k),inset 0 0 22px -14px var(--k);transition:transform .12s,box-shadow .15s,background .15s;touch-action:manipulation}
.pet-btn svg{width:30px;height:30px;fill:none;stroke:var(--k);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px var(--k))}
.pet-btn:hover:not([aria-disabled="true"]){transform:translateY(-2px);box-shadow:0 0 24px -6px var(--k),inset 0 0 26px -12px var(--k)}
.pet-btn.on{background:color-mix(in srgb,var(--deep) 55%,var(--k))}
.pet-btn[aria-disabled="true"]{opacity:.42;cursor:default;box-shadow:none}        /* sigue respondiendo al toque: explica por qué no se puede */
.pet-btn.k-green{--k:var(--green)} .pet-btn.k-violet{--k:var(--violet)} .pet-btn.k-cyan{--k:var(--cyan)} .pet-btn.k-blue{--k:#6d8cff} .pet-btn.k-pink{--k:var(--pink)} .pet-btn.k-orange{--k:var(--orange)}
@container pet (min-width:620px){        /* bloque ancho: los seis cuidados en una fila, como en el boceto */
  .pet-actions{grid-template-columns:repeat(6,minmax(0,1fr))}
  .pet-btn{min-height:74px}
  .pet-btn svg{width:36px;height:36px}
  .pet-hud{gap:10px 18px;padding:12px 16px}
}
@container pet (max-width:339px){        /* teléfonos angostos: el nivel baja a su propia fila para que los cuatro medidores quepan */
  .pet-hud{grid-template-columns:minmax(0,1fr);padding:12px 10px}
  .pet-level{grid-template-columns:auto minmax(0,1fr);align-items:center;justify-items:start;gap:10px;max-width:none;text-align:left}
  .pet-star{width:50px}
}
.pet-tray{display:grid;gap:10px;padding:12px 14px;border-radius:16px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.pet-tray:empty{display:none}
.pet-tray p{color:var(--dim);font-size:.9rem;line-height:1.35}
.pet-tray p b{color:var(--ink)}
.pet-tray .bar{width:100%}
.pet-tray-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.pet-tray-row .bar{flex:1 1 140px}
.pet-foods{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:8px}
.food{display:grid;gap:3px;justify-items:start;padding:10px 12px;border:2px solid var(--green);border-radius:14px;background:color-mix(in srgb,var(--deep) 88%,var(--green));color:var(--ink);font:700 .88rem/1.2 var(--body);text-align:left;cursor:pointer}
.food small{color:var(--dim);font:500 .76rem/1.3 var(--body)}
.food .cost{display:inline-flex;align-items:center;gap:4px;color:#ffb13d;font:700 .78rem/1 var(--mono)}
.food .cost svg{width:13px;height:13px;fill:currentColor}
.food[aria-disabled="true"]{border-color:var(--line);background:var(--deep);opacity:.6;cursor:default}
.bath-meter{height:10px;border-radius:99px;background:var(--tile);overflow:hidden}
.bath-meter i{display:block;height:100%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);transform-origin:left;transform:scaleX(var(--v,0));transition:transform .15s}
/* adopción */
.pet-adopt{justify-items:center;text-align:center}
.pet-adopt .cat{height:clamp(120px,30vw,170px);--gk:1.6}
.pet-adopt ul{display:grid;gap:8px;margin:0;padding:0;list-style:none;color:var(--dim);font-size:.94rem;text-align:left}
.pet-adopt li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start}
.pet-adopt li svg{width:20px;height:20px;margin-top:2px;fill:var(--t)}
.pet-adopt li b{color:var(--ink)}
.pet-adopt .form{width:100%;text-align:left}
/* personalizar */
.modal-box.pet-style{--t:var(--pink);width:min(100%,640px);justify-items:stretch;gap:12px;text-align:left}
.modal-box.pet-style h2{padding-right:40px}
.style-name{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.style-name .fld{flex:1 1 180px}
.style-sec{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.style-sec h3{color:var(--cyan);font:700 .8rem/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase}
.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px}
.style-item{position:relative;display:grid;justify-items:center;align-content:start;gap:4px;min-width:0;padding:9px 5px 8px;border:2px solid var(--line);border-radius:13px;background:var(--panel);color:var(--ink);font:600 .74rem/1.2 var(--body);text-align:center;cursor:pointer}
.style-item:hover:not(.locked){border-color:var(--dim)}
.style-item[aria-pressed="true"]{border-color:var(--green);box-shadow:0 0 16px -5px var(--green)}
.style-item[aria-pressed="true"]::after{content:"Puesto";position:absolute;top:-8px;right:6px;padding:2px 6px;border-radius:6px;background:var(--green);color:var(--on);font:800 .56rem/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase}
.style-item.locked{cursor:default}
.style-item.locked .style-pre{opacity:.35;filter:grayscale(1)}
.style-item small{color:var(--dim);font:500 .66rem/1.25 var(--body)}
.style-item.fresh{border-color:#ffe04d}
.style-pre{display:grid;place-items:center;width:46px;height:46px;color:var(--dim)}
.style-pre.sw{border-radius:50%;box-shadow:inset 0 0 0 2px var(--line)}
.style-pre.rm{border-radius:10px;background:var(--pet-room) 50% 30%/260% auto;box-shadow:inset 0 0 0 2px var(--line)}
.style-pre.none{border-radius:50%;box-shadow:inset 0 0 0 2px var(--line);font:700 1.2rem/1 var(--body)}
.style-pre.ct .cat{width:100%;height:100%}                                            /* el gato de un rango, en chico *//* caras: la tira de sprites del usuario (11 celdas) o, en los gatos sin sprites, un dibujo de línea */
.pet-face{display:block;aspect-ratio:1}
.pet-face.sprite{background:var(--pet-faces) calc(var(--i)*10%) 0/1100% 100% no-repeat}
.pet-face.sprite[data-face="neutral"]{animation:faceblink 4.6s steps(1) infinite}
@keyframes faceblink{0%,90%{background-position:0 0}92%{background-position:10% 0}94%{background-position:20% 0}96%{background-position:30% 0}98%{background-position:10% 0}}
.pet-face.draw svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pet-face.draw svg .fill{fill:currentColor;stroke:none}
/* tarjeta del gato en el inicio */
.dash-card.pet-card{grid-column:1/-1;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px clamp(12px,3vw,20px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t) 45%,var(--line))}
.pet-card .cat{--gk:1;width:clamp(56px,12vw,76px);height:clamp(56px,12vw,76px)}
.pet-card-main{display:grid;gap:7px;min-width:0}
.pet-card h3{letter-spacing:.04em;text-transform:none;font-size:.95rem}
.pet-card p{color:var(--dim);font-size:.9rem;line-height:1.35}
.mini-needs{display:flex;flex-wrap:wrap;gap:6px 14px}
.mini-need{--k:var(--cyan);display:inline-flex;align-items:center;gap:6px;color:var(--dim);font:700 .68rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase}
.mini-need i{display:block;width:52px;height:6px;border-radius:9px;background:var(--tile);overflow:hidden}
.mini-need i::after{content:"";display:block;width:calc(var(--v)*100%);height:100%;border-radius:inherit;background:var(--k)}
.mini-need.low{color:var(--k)}
.toast.pet{--k:var(--pink)}

/* colour of a test: set on the card, the play view or a button (kept last so it wins over defaults) */
.c-green{--c:var(--green)} .c-cyan{--c:var(--cyan)} .c-orange{--c:var(--orange)} .c-pink{--c:var(--pink)} .c-violet{--c:var(--violet)}

@media (min-width:760px){ .walker{margin-top:-34px} }
@media (max-width:860px){
  .dash{grid-template-columns:minmax(0,1fr)}
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero .cat-sleep{display:none}
  .hero .cat-sit{width:auto;height:150px;justify-self:center}
  .row{grid-template-columns:repeat(3,minmax(0,1fr));padding-inline:0}
  .row-name{grid-column:1/-1}
  .daywrap,.daychart.none{grid-column:1/3;width:100%;max-width:300px}
  .row .btn{grid-column:3;justify-self:end;align-self:start}
}
@media (max-width:600px){
  .top-in{gap:6px 10px}
  .top-tools{order:2;gap:6px}
  .nav{order:3;width:100%}
  .acct{max-width:132px;padding-inline:12px}
  body[data-view="play"] .logo,body[data-view="play"] .acct,.menu-back kbd{display:none}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-card{padding:12px}
  .lp-card .cat{width:48px;height:48px}
  .reel-tile{width:76px}
  .tile-stat{padding:12px}
  .tile-stat span{display:none}
  .meter{gap:10px;padding:8px 12px 8px 8px}
  .meter-cat{width:50px;height:46px}
  .dash-card.pet-card{grid-template-columns:auto minmax(0,1fr)}
  .pet-card .btn{grid-column:1/-1;justify-self:start}
}
@media (max-width:760px){
  .pi{grid-template-columns:minmax(0,1fr)}
  .pi-sky{width:min(100%,200px)}
  .key{min-height:46px}
}
@media (max-width:520px){
  .eyes{gap:30px} .eyes i{width:64px}
  .pad[data-state="go"] .eyes i{height:46px}
}
@media (prefers-reduced-motion:reduce){
  .hero .cat,.word,.pc.next .pc-back,.pi-caret,.pi-d:last-child,.meter.flash,.streak.pop,.streak.pop::after,.streak[data-state="pending"] svg,.verdict,.lp-card.up,.lp-card.up .cat,.toast,.modal,.modal-box,.tier-up .cat,.rays,.chest.ready .chest-ico,.reel-tile.won,.prize b,.slots i.cur,
  .lvl[data-aura] .xp-bar,.lvl[data-aura] .xp-bar i,.lvl[data-aura] .xp-bar::after,.lvl[data-aura] .xp-spark,.toast.shield svg,.lp-card.saved .lp-guard,.cat[data-glow],
  .pet-body,.pet-actor .pet-body,.pet-lids i,.pet-aura,.pet-aura i,.pet-zzz i,.pet-look[data-color="prism"],.need.low .need-ring,.need.up .need-ring,.pet-face.sprite[data-face="neutral"]{animation:none!important}      /* el aura queda fija: color y brillo, sin movimiento */
  .btn,.card,.tile,.pc-in,button.pc,.pi-zoom,.goal-fill,.lp-bar i,.menu-back,.pet-btn,.need-bar i,.pet-flip,.pet-tub,.pet-dim,.pet-room .pet-yarn,.pet-bubble{transition:none!important}
  .pet-actor,.pet-bubble{--walk:0s}
  .pet-zzz i{position:static;opacity:.9}                                /* las zetas quedan quietas, a la vista */
  .pet-fx i{animation:fxfade 1.1s linear forwards}                      /* corazones y burbujas aparecen y se apagan sin subir */
}

/* ---------- celular y pantallas táctiles: lo mismo, más liviano ----------
   Tocar rápido (pruebas, cartas) no hace zoom con doble toque ni espera para ver si era uno.
   En el celular, el desenfoque detrás de la barra de arriba y de las ventanas se recalcula en cada cuadro del scroll,
   y los brillos que laten (sombras y filtros animados) obligan a repintar sin parar: ahí quedan fijos, con el mismo color. */
html{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.ach-group,.album-row{content-visibility:auto;contain-intrinsic-size:auto 220px}      /* las listas largas se dibujan al llegar a ellas */
@media (hover:none),(max-width:760px){
  .top{background:color-mix(in srgb,var(--void) 95%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none}
  .modal{background:color-mix(in srgb,var(--void) 90%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none}
  .cat[data-glow="3"],.cat[data-glow="4"]{animation:none}
  .lvl[data-aura] .xp-bar,.pc.next .pc-back{animation:none}
  .pet-actor{will-change:transform}                                     /* el gato que camina se mueve sin volver a pintarse entero */
}

/* ---------- anuncios con recompensa y apoyo en Ko-fi ---------- */
.revive{display:grid;justify-items:center;gap:10px;text-align:center}
.revive h2{font:800 1.3rem/1.2 var(--display)}
.revive p{color:color-mix(in srgb,var(--ink) 86%,var(--dim))}
.revive .revive-left{color:var(--orange);font-weight:700;font-size:.9rem}
.revive .btn-row{justify-content:center;margin-top:6px}
.revive .btn svg{width:18px;height:18px;margin-right:8px}
.revive-paws{display:flex;gap:6px}
.revive-paws .paw{width:26px;height:26px;fill:color-mix(in srgb,var(--dim) 45%,transparent);animation:pawfade 1.4s ease-in-out infinite alternate}
.revive-paws .paw:nth-child(2){animation-delay:.2s}.revive-paws .paw:nth-child(3){animation-delay:.4s}
@keyframes pawfade{to{fill:var(--pink);filter:drop-shadow(0 0 6px var(--pink))}}
.revive-flame svg{width:46px;height:46px;fill:var(--orange);filter:drop-shadow(0 0 10px var(--orange))}
.house-modal .modal-box,.revive-modal .modal-box{max-width:440px}
.house-ad{display:grid;justify-items:center;gap:10px;text-align:center}
.house-ad h2{font:800 1.2rem/1.25 var(--display)}
.house-ad p{color:color-mix(in srgb,var(--ink) 86%,var(--dim))}
.house-cat{width:86px;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--violet) 70%,transparent))}
.house-bar{width:100%;height:6px;border-radius:99px;background:color-mix(in srgb,var(--line) 70%,transparent);overflow:hidden}
.house-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--green));transform-origin:left;animation:housebar linear forwards}
@keyframes housebar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.btn.kofi{--c:#ff5e5b;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn.kofi svg{width:20px;height:20px}
.pill.rescue{cursor:pointer;border:0;font:inherit}
.pill.rescue svg{width:12px;height:12px;margin-right:4px}
.pill.mecenas svg,.toast svg.cup{width:16px;height:16px;flex:none}
.pill.mecenas{--k:#ffd54d;background:color-mix(in srgb,#ffd54d 18%,var(--deep));color:#ffe9a3;box-shadow:inset 0 0 0 1.5px #ffd54d,0 0 14px -4px #ffd54d}
.support{display:grid;gap:12px;padding:clamp(16px,3vw,24px);border-radius:20px;background:radial-gradient(circle at 90% 0%,color-mix(in srgb,#ff5e5b 18%,transparent),transparent 60%),var(--panel);box-shadow:inset 0 0 0 1px color-mix(in srgb,#ff5e5b 40%,var(--line))}
.support h2{font:800 1.1rem/1.2 var(--display)}
.support .btn.kofi{justify-self:start}
.support p{color:color-mix(in srgb,var(--ink) 86%,var(--dim))}
.support form{display:flex;flex-wrap:wrap;gap:8px}
.support .input{flex:1 1 180px;text-transform:uppercase}
.foot-kofi{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;color:#ff8a87;font-weight:700;text-decoration:none}
.foot-kofi svg{width:18px;height:18px}
@media (prefers-reduced-motion:reduce){.revive-paws .paw,.house-bar i{animation:none}}
.foot-legal{margin:10px 0 0;font-size:.8rem}
.foot-legal a{color:var(--dim)}
.foot-legal a:hover{color:var(--ink)}