/* Los Telerín · estilos. Móvil primero (Android barato): solo se animan transform y opacity. */
@font-face{font-family:"Alegreya";src:url(../fonts/alegreya.woff2) format("woff2");font-weight:700 800;font-display:swap}
@font-face{font-family:"Figtree";src:url(../fonts/figtree.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --verde:#2e5a36; --verde-osc:#234a2b; --verde-silla:#37633e;
  --crema:#f8efd9; --arena:#efe2c4; --raya:#e3d2ac; --arena-osc:#d9c49a; --arena-ico:#ead9b1;
  --tinta:#2f2a24; --tinta-2:#4a4034; --tinta-3:#6b5d45;
  --sv:#f3ead6; --sv2:#d6dcc6;                       /* texto sobre verde */
  --oro:#e8c46a; --curro:#f39a3d; --casa:#9fd39a; --fuera:#8fb6e8; --urgente:#d3302a; --lia:#7a2f4f;
  --r-s:12px; --r-m:14px; --r-l:20px;
  --sale:cubic-bezier(.23,1,.32,1);                  /* entra/sale */
  --mueve:cubic-bezier(.77,0,.175,1);                /* se mueve en pantalla */
  --cajon:cubic-bezier(.32,.72,0,1);                 /* hoja de abajo */
  --abajo:env(safe-area-inset-bottom,0px);
  --serif:"Alegreya",Georgia,serif; --sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior-y:none;background:#d8cdb0}
body{font:16px/1.4 var(--sans);color:var(--tinta);background:#d8cdb0;-webkit-font-smoothing:antialiased;min-height:100dvh}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
input,textarea,select{font:16px/1.4 var(--sans);color:var(--tinta)}
::selection{background:#cfe0a8;color:var(--tinta)}
:focus-visible{outline:2.5px solid var(--oro);outline-offset:2px;border-radius:8px}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
h1,h2,h3,p{text-wrap:pretty}

#app{position:relative;max-width:480px;margin:0 auto;min-height:100dvh;background:var(--arena);container-type:inline-size;overflow-x:clip}

/* ───────── parra (fija arriba, compartida por todas las pestañas) ───────── */
.parra{position:absolute;left:0;top:0;width:100%;aspect-ratio:360/96;pointer-events:none;z-index:3;overflow:hidden}
.parra-rama{position:absolute;left:0;top:0;width:100%;height:100%}
.racimo{position:absolute;transform-origin:50% 0;height:auto}
.r1{left:6.6%;top:26%;width:9.4%;--amp:5deg;--t:0ms}
.r2{left:27%;top:29%;width:8.2%;--amp:-6deg;--t:90ms}
.r3{left:50.6%;top:15%;width:10%;--amp:4.4deg;--t:40ms}
.r4{left:76.4%;top:19%;width:8.6%;--amp:-5.4deg;--t:140ms}
.mece .racimo{animation:mece 2.6s cubic-bezier(.3,.1,.3,1) var(--t) 1 both}
@keyframes mece{0%{transform:rotate(var(--amp))}22%{transform:rotate(calc(var(--amp)*-.62))}44%{transform:rotate(calc(var(--amp)*.36))}64%{transform:rotate(calc(var(--amp)*-.18))}82%{transform:rotate(calc(var(--amp)*.07))}100%{transform:rotate(0)}}

/* ───────── vistas ───────── */
.vista{display:none}
.vista.activa{display:block}
.vista.entra .cab-txt,.vista.entra .cuerpo{animation:entra .26s var(--sale) both}
.vista.sale .cab-txt,.vista.sale .cuerpo{animation:sale .11s ease-out both}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sale{to{opacity:0}}

.cab{position:relative;background:var(--verde);color:var(--sv);padding-top:calc(26.67vw - 2px);padding-top:calc(26.67cqw - 2px)}
.saludo{padding:0 20px}
.marca{font:700 17px/1 var(--serif);color:var(--oro);letter-spacing:.005em}
.saludo h1{font:800 33px/1.05 var(--serif);margin-top:7px;color:#fbf5e6}
.fecha{font-size:15px;line-height:1.3;color:var(--sv2);margin-top:4px}

/* Ahora mismo */
.ahora{margin:18px 12px 0}
.ahora-t{display:flex;justify-content:space-between;align-items:center;margin:0 8px 10px}
.ahora-t h2{font:700 14px/1 var(--sans);color:var(--sv)}
.leyenda{display:flex;gap:11px;font:500 12px/1 var(--sans);color:var(--sv2)}
.leyenda span{display:flex;align-items:center;gap:5px}
.leyenda i{width:8px;height:8px;border-radius:50%}
.sillas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.silla{display:flex;align-items:center;gap:12px;padding:10px 8px 10px 13px;min-height:64px;border-radius:18px;text-align:left;
  background:rgba(243,234,214,.085);box-shadow:inset 0 0 0 1px rgba(243,234,214,.13);
  transition:transform .14s var(--sale),background-color .14s ease}
.silla:active{transform:scale(.97);background:rgba(243,234,214,.14)}
.cara{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:var(--sv);color:var(--verde-osc);display:grid;place-items:center;
  font:800 18px/1 var(--serif);outline:2.5px solid var(--est,transparent);outline-offset:2px}
.cara b{font:inherit;transform:translateY(-.5px)}
.e-curro{--est:var(--curro)} .e-casa{--est:var(--casa)} .e-fuera{--est:var(--fuera)} .e-nose{--est:rgba(243,234,214,.42)}
.probable .cara{outline-style:dashed}
.e-nose .cara{outline-style:dotted;background:#c9cdb9;color:#3f5a41}
.minis{position:absolute;right:-9px;bottom:-6px;display:flex}
.minis i{width:17px;height:17px;border-radius:50%;background:#e6dcc0;color:var(--verde-osc);font:700 10px/17px var(--sans);font-style:normal;text-align:center;box-shadow:0 0 0 1.5px var(--verde-silla)}
.minis i+i{margin-left:-3px}
.silla .t{min-width:0}
.silla .t b{display:block;font:600 15px/1.2 var(--sans);color:#fbf5e6;text-wrap:balance}
.silla .t em{display:block;font:400 13px/1.25 var(--sans);font-style:normal;color:var(--sv2);text-wrap:balance}
.silla .t b+em{margin-top:2px}

.cab:not(.simple){padding-bottom:6px}
/* El nogal va en dos capas: fondo (rama) y frente (hojas y erizos). Las mascotas pasan entre las dos. */
.nogal{position:relative;width:100%;aspect-ratio:360/126;margin-top:-1px;pointer-events:none}
.nogal img{position:absolute;left:0;top:0;width:100%;height:100%}
.nogal-fondo{z-index:1}
.nogal .nogal-frente{z-index:16}
.nogal .erizo-suelto{z-index:16;left:63.28%;top:41.72%;width:8.17%;height:auto;transition:opacity 1.2s ease}
.cab.simple{padding-bottom:26px}
.onda{display:block;width:100%;height:22px;margin-top:-1px;color:var(--verde);position:relative;z-index:1}

/* ───────── contenido ───────── */
.cuerpo{position:relative;padding:0 16px calc(96px + var(--abajo))}
.cab + .nogal + .cuerpo{margin-top:-6px}
.cab.simple + .onda + .cuerpo{padding-top:6px}
.sec{margin-top:26px}
.sec:first-child{margin-top:0}
.sec-t{display:flex;align-items:center;gap:9px;margin:0 4px 10px;min-height:28px}
.sec-t h2{font:700 21px/1.1 var(--serif)}
.sec-t svg.i{color:var(--tinta-2)}
.mas{margin-left:auto;font:600 14px/1 var(--sans);color:var(--verde);padding:12px 4px;margin-block:-12px;border-radius:8px;transition:opacity .12s ease}
.mas:active{opacity:.55}

.tarj{background:var(--crema);border-radius:var(--r-l);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 1px 1px rgba(90,60,20,.07),0 10px 20px -14px rgba(90,60,20,.42)}
.fila{display:flex;align-items:center;gap:12px;padding:13px 14px;min-height:66px;width:100%;text-align:left;position:relative;border-radius:var(--r-l)}
button.fila{transition:background-color .14s ease}
button.fila:active{background:rgba(120,90,40,.07)}
.fila+.fila::before{content:"";position:absolute;left:66px;right:0;top:0;height:1px;background:var(--raya)}
.fila .t{flex:1;min-width:0;line-height:1.3}
.fila .t b{font-weight:600}
.fila .s{font-size:14px;color:var(--tinta-3);margin-top:2px;display:flex;align-items:center;gap:5px}
.fila .s svg{width:16px;height:16px;stroke-width:2;color:var(--verde)}
.ico{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--arena-ico);color:#5b4a2e;flex:none}
.ico.rojo{background:var(--urgente);color:#fff}
.urg{font:700 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;border-radius:8px;background:var(--urgente);color:#fff;flex:none}

/* Comida del finde */
.comida{padding:16px 16px 14px}
.cuando{display:flex;justify-content:space-between;align-items:baseline}
.cuando b{font-size:17px;font-weight:600}
.cuando span{font-size:14px;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.caras{display:grid;grid-template-columns:repeat(6,1fr);margin:14px -4px 0}
.cc{display:flex;flex-direction:column;align-items:center;gap:6px;font:500 12px/1 var(--sans);color:var(--tinta-3);position:relative}
.cc .av{width:36px;height:36px;border-radius:50%;background:var(--arena-ico);color:var(--tinta-2);display:grid;place-items:center;font:800 18px/1 var(--serif);transition:opacity .2s ease,background-color .2s ease,color .2s ease}
.cc .ok{position:absolute;top:22px;left:calc(50% + 6px);width:17px;height:17px;border-radius:50%;background:var(--verde);display:grid;place-items:center;box-shadow:0 0 0 2px var(--crema);
  opacity:0;transform:scale(.6);transition:opacity .16s ease,transform .26s var(--sale)}
.cc .ok svg{width:10px;height:10px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cc.va .av{background:#cfe0b2;color:var(--verde-osc)}
.cc.va .ok{opacity:1;transform:none}
.cc.nova .av{opacity:.42}
.cc.yo{color:var(--tinta);font-weight:700}
.cc.yo:not(.va):not(.nova) .av{outline:2px dashed var(--arena-osc);outline-offset:2px}
.comida .pie{margin-top:14px;font-size:15px;color:var(--tinta-2);min-height:21px}
.dos{display:flex;gap:8px;margin-top:12px}
.bt{flex:1;min-height:48px;padding:0 14px;border-radius:var(--r-m);font:600 16px/1 var(--sans);display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .14s var(--sale),background-color .16s ease,color .16s ease,box-shadow .16s ease}
.bt:active{transform:scale(.97)}
.bt.si{background:var(--verde);color:var(--sv)}
.bt.no{background:#eadbb6;color:#4f4129}
.bt.oro{background:var(--oro);color:var(--tinta)}
.bt[disabled]{opacity:.45;pointer-events:none}
.bt svg{width:18px;height:18px;stroke-width:2.4}
.dos.elegido .bt:not(.on){background:transparent;box-shadow:inset 0 0 0 1.5px var(--arena-osc);color:var(--tinta-3)}

/* Hoy: el tiempo de los cuatro sitios y la gasolina */
.tiempo{display:grid;grid-template-columns:repeat(4,1fr);padding:14px 6px 12px}
.tiempo div{text-align:center;font:500 13px/1.2 var(--sans);color:var(--tinta-2)}
.tiempo div+div{box-shadow:-1px 0 0 var(--raya)}
.tiempo b{display:block;font:800 24px/1 var(--serif);color:var(--tinta);margin-bottom:5px}
.tiempo span{display:block;font-size:12px;color:var(--tinta-3);margin-top:1px}
.tiempo+.fila::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--raya)}
.precio{font:800 24px/1 var(--serif);color:var(--tinta);flex:none}
.precio small{font:600 12px/1 var(--sans);color:var(--tinta-3);margin-left:3px}

/* Losetas */
.losetas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.loseta{background:var(--crema);border-radius:var(--r-l);padding:14px 14px 15px;min-height:136px;display:flex;flex-direction:column;position:relative;overflow:hidden;text-align:left;color:var(--tinta-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 1px 1px rgba(90,60,20,.07),0 10px 20px -14px rgba(90,60,20,.42);transition:transform .14s var(--sale)}
button.loseta:active{transform:scale(.97)}
.loseta .num{font:800 36px/1 var(--serif);margin-top:auto;color:var(--tinta);font-variant-numeric:lining-nums}
.loseta .num small{font:700 17px/1 var(--serif);margin-left:3px}
.loseta .lab{font-size:14px;line-height:1.3;margin-top:5px;color:var(--tinta-3)}
.loseta.lia{background:var(--lia);color:#f3dfe7;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 20px -14px rgba(80,20,45,.7)}
.loseta.lia .num{color:#fff}.loseta.lia .lab{color:#efd3de}
.loseta.sierra .num,.loseta.sierra .lab,.loseta.sierra svg.i{position:relative;z-index:1}
.loseta.sierra{background:#fbf5e4}
.loseta .quilamas{position:absolute;left:0;right:0;bottom:0;width:100%;height:66%;color:#f2e5c3}
.loseta .cab-j{display:flex;align-items:center;gap:8px;font:600 14px/1.2 var(--sans);color:var(--tinta)}
.loseta .cab-j span{display:block;font-weight:400;color:var(--tinta-3);font-size:13px;margin-top:1px}
.podio{display:flex;align-items:flex-end;gap:6px;height:74px;margin-top:auto}
.podio .p{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;justify-content:flex-end;height:100%}
.podio .av{width:26px;height:26px;border-radius:50%;background:var(--arena-ico);color:var(--tinta-2);display:grid;place-items:center;font:800 14px/1 var(--serif)}
.podio .bar{width:100%;border-radius:7px 7px 3px 3px;background:var(--arena-osc);font:700 12px/1 var(--sans);color:#5b4a2e;display:flex;justify-content:center;padding-top:5px}
.podio .oro .bar{background:var(--oro);color:var(--tinta)}
.cona{margin:12px 6px 0;font-size:15px;line-height:1.35;color:var(--tinta-3)}

/* ───────── Lo mío ───────── */
.sube{padding:16px}
.sube p{font-size:15px;color:var(--tinta-2)}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.tres .bt{flex-direction:column;gap:7px;min-height:76px;font-size:15px;border-radius:16px}
.tres .bt svg{width:24px;height:24px;stroke-width:1.75}
.semana{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:14px}
.semana div{background:var(--arena);border-radius:10px;padding:7px 0 6px;text-align:center;font:500 11px/1 var(--sans);color:var(--tinta-3);font-variant-numeric:tabular-nums}
.semana b{display:block;font:700 13px/1 var(--sans);color:var(--tinta);margin-bottom:4px}
.semana .on{background:#f6b062;color:#4a2c0c}.semana .on b{color:#2c1a06}
.sube .nota{font-size:14px;color:var(--tinta-3);margin-top:11px}
.preg{padding:16px}
.preg>b{font-size:17px;font-weight:600;display:block}
.ops{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.op{min-height:44px;padding:0 15px;border-radius:22px;box-shadow:inset 0 0 0 1.5px var(--arena-osc);background:#fffaf0;font:500 15px/1 var(--sans);
  transition:transform .14s var(--sale),background-color .16s ease,color .16s ease,box-shadow .16s ease}
.op:active{transform:scale(.96)}
.op.on{background:var(--verde);box-shadow:inset 0 0 0 1.5px var(--verde);color:var(--sv)}
.op.otra{box-shadow:none;outline:1.5px dashed var(--arena-osc);outline-offset:-1.5px}
.preg .bt{width:100%;margin-top:14px}
.preg .nota{font-size:14px;color:var(--tinta-3);margin-top:9px}
.pliega{display:grid;grid-template-rows:1fr;transition:grid-template-rows .32s var(--mueve),opacity .2s ease,margin-top .32s var(--mueve)}
.pliega>div{overflow:hidden;min-height:0}
.pliega.cerrada{grid-template-rows:0fr;opacity:0;margin-top:0}
.gracias{display:flex;align-items:center;gap:12px;padding:18px 16px;font:700 21px/1.1 var(--serif);animation:entra .26s var(--sale) both}
.gracias small{display:block;font:400 14px/1.3 var(--sans);color:var(--tinta-3);margin-top:3px}
.gracias .ico{background:#cfe0b2;color:var(--verde-osc)}
.pide{padding:16px}
.pide p{font-size:15px;color:var(--tinta-2)}
.pide textarea{display:block;width:100%;margin-top:12px;min-height:76px;padding:11px 12px;border:0;border-radius:var(--r-m);background:#fffaf0;box-shadow:inset 0 0 0 1.5px var(--arena-osc);resize:none;caret-color:var(--verde)}
.pide textarea::placeholder{color:#857657}
.pide textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--verde)}
.pide .bt{width:100%;margin-top:10px}
.pronto{padding:22px 18px;color:var(--tinta-2);font-size:15px}
.pronto b{display:block;font:700 21px/1.15 var(--serif);color:var(--tinta);margin-bottom:6px}

/* ───────── piezas nuevas: vacíos, avisos, entrada ───────── */
.vacio{padding:18px 16px;font-size:15px;color:var(--tinta-3)}
.fila.nuevo .t>b:first-child::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--urgente);margin-right:7px;vertical-align:1px}
.nuevo-aviso{width:100%;margin-top:10px}
.permiso{padding:16px;margin-bottom:22px}
.permiso p{font-size:15px;color:var(--tinta-2)}
.permiso .bt{width:100%;margin-top:12px}
.permiso .dos .bt{width:auto;margin-top:0}
.hoja textarea{display:block;width:100%;margin-top:10px;min-height:64px;padding:11px 12px;border:0;border-radius:var(--r-m);background:#fffaf0;box-shadow:inset 0 0 0 1.5px var(--arena-osc);resize:none;caret-color:var(--verde)}
.hoja textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--verde)}
.hoja .ops{margin-top:8px}
.palanca{display:flex;align-items:center;gap:10px;margin-top:12px;min-height:44px;font-size:15px;color:var(--tinta-2)}
.palanca input{width:22px;height:22px;accent-color:var(--urgente)}
.lista-avisos{margin:12px -6px 0;max-height:56dvh;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
.entrada .nombres{display:grid;gap:10px;padding-top:8px}
.nombre{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 16px;border-radius:var(--r-l);background:var(--crema);text-align:left;font:600 18px/1.2 var(--sans);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 10px 20px -14px rgba(90,60,20,.42);transition:transform .14s var(--sale)}
.nombre:active{transform:scale(.97)}
.nombre[disabled]{opacity:.5;box-shadow:none}
.nombre .cara{background:var(--arena-ico);outline:0}
.nombre span:nth-child(2){flex:1}
.nombre small{display:block;font:400 13px/1.2 var(--sans);color:var(--tinta-3)}
.entrada .nota{font-size:14px;color:var(--tinta-3);margin:16px 4px 0}
.tostada{position:fixed;left:50%;bottom:calc(84px + var(--abajo));transform:translate(-50%,16px);z-index:60;max-width:min(92vw,440px);padding:12px 16px;border-radius:14px;background:#2f2a24;color:#f8efd9;font:500 15px/1.3 var(--sans);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .26s var(--sale)}
.tostada.ve{opacity:1;transform:translate(-50%,0)}
/* la lumbre de Linares */
.lumbre{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:22px;background:#3b2a1c;color:#f8e6c6;box-shadow:0 10px 24px -14px rgba(120,50,10,.8)}
.lumbre p{font-size:16px}
.lumbre-bt{width:100%;margin-bottom:22px}
.llamas{position:relative;width:38px;height:44px;flex:none}
.llamas i{position:absolute;left:50%;bottom:0;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;transform-origin:50% 100%;animation:llama 1.1s ease-in-out infinite alternate}
.llamas i:nth-child(1){width:34px;height:42px;margin-left:-17px;background:#e2562b}
.llamas i:nth-child(2){width:23px;height:30px;margin-left:-11px;background:#f39a3d;animation-duration:.8s;animation-delay:-.3s}
.llamas i:nth-child(3){width:12px;height:17px;margin-left:-6px;background:#f8d66d;animation-duration:.6s;animation-delay:-.5s}
@keyframes llama{from{transform:scale(1,1) rotate(-3deg)}to{transform:scale(.9,1.12) rotate(4deg)}}

/* ───────── Juego ───────── */
.reto{padding:16px}
.dia{display:block;font:600 13px/1 var(--sans);color:var(--tinta-3);margin-bottom:7px}
.reto>b,.j-cartel b{display:block;font:800 25px/1.1 var(--serif)}
.reto p,.j-cartel p{font-size:15px;color:var(--tinta-2);margin-top:6px}
.reto .bt{width:100%;margin-top:14px}
.reto .nota{font-size:14px;color:var(--tinta-3);margin-top:10px}
.reto .nota b{color:var(--tinta);font-weight:700}
.rk{min-height:54px;padding-block:9px}
.rk+.rk::before{left:14px}
.rk .pos{width:20px;text-align:center;font:800 19px/1 var(--serif);color:var(--tinta-3)}
.rk .av{width:34px;height:34px;border-radius:50%;background:var(--arena-ico);color:var(--tinta-2);display:grid;place-items:center;font:800 17px/1 var(--serif);flex:none}
.rk .pts{font:800 20px/1 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.rk.yo{background:#eef0cf;border-radius:0}
.rk.yo:first-child{border-radius:var(--r-l) var(--r-l) 0 0}.rk.yo:last-child{border-radius:0 0 var(--r-l) var(--r-l)}
.rk.yo .av{background:#cfe0b2;color:var(--verde-osc)}
.rk:first-child .pos{color:#b98a2e}

.tinaja{padding:16px}
.tinaja p{font-size:15px;color:var(--tinta-2);margin-top:12px}
.tinaja p b{font:800 19px/1 var(--serif);color:var(--tinta)}
.tin-barra{height:14px;border-radius:7px;background:var(--arena);overflow:hidden;box-shadow:inset 0 1px 2px rgba(90,60,20,.18)}
.tin-barra i{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,#7a2f4f,#a04468);transform-origin:0 50%}
.jugando,.jugando body{overflow:hidden}
.j-sierra{position:absolute;left:0;right:0;bottom:58px;width:100%;height:150px;color:#e9dab6}
.juego{position:fixed;inset:0;z-index:50;background:var(--arena);max-width:480px;margin:0 auto;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.j-cielo{position:absolute;left:0;right:0;top:0;height:calc(26.67vw + 44px);max-height:172px;background:linear-gradient(var(--verde) 62%,rgba(46,90,54,0))}
.j-cielo>img{position:absolute;left:0;top:0;width:100%}
.j-alambre{position:absolute;left:0;right:0;top:132px;height:2px;background:#5b4630;opacity:.7}
.j-yuna{position:absolute;left:0;top:94px;width:59px;height:40px}
.j-suelo{position:absolute;left:0;right:0;bottom:0;height:58px;background:#e3d2ac;box-shadow:inset 0 2px 0 #d2bd8e;display:grid;place-items:center;font:500 13px/1 var(--sans);color:#8a7650}
.j-yali{position:absolute;left:0;bottom:2px;width:84px;height:56px}
.juego canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.j-hud{position:absolute;left:0;right:0;top:0;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 0;display:flex;align-items:center;gap:10px;color:var(--sv);pointer-events:none}
.j-salir{pointer-events:auto;width:44px;height:44px;border-radius:50%;background:rgba(20,40,24,.5);color:var(--sv);display:grid;place-items:center}
.j-puntos{display:flex;align-items:baseline;gap:8px;flex:1}
.j-puntos b{font:800 32px/1 var(--serif);font-variant-numeric:lining-nums tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.j-mult{font:700 15px/1 var(--sans);padding:4px 7px;border-radius:9px;background:rgba(243,234,214,.16);transition:transform .2s var(--sale),background-color .2s ease,color .2s ease}
.j-mult.on{background:var(--oro);color:var(--tinta);transform:scale(1.12)}
.j-vidas{display:flex;gap:2px;padding:5px 7px;border-radius:20px;background:rgba(20,40,24,.5)}
.j-vidas img{width:26px;height:26px;transition:opacity .2s ease,transform .25s var(--sale)}
.j-vidas img.gastada{opacity:.25;transform:scale(.8)}
.j-tiempo{position:absolute;left:12px;right:12px;top:calc(60px + env(safe-area-inset-top,0px));height:5px;border-radius:3px;background:rgba(243,234,214,.22);overflow:hidden}
.j-tiempo i{display:block;height:100%;background:var(--oro);transform-origin:0 50%;border-radius:3px}
.j-cartel{position:absolute;inset:0;display:grid;place-items:center;padding:24px;background:rgba(24,20,14,.42)}
.j-cartel[hidden]{display:none}
.j-cartel .tarj{width:100%;max-width:340px;padding:20px;animation:entra .26s var(--sale) both}
.j-cartel .bt{width:100%;margin-top:14px}
.j-cartel .bt+.bt{margin-top:8px}
.j-cartel .j-total{font-size:56px;line-height:1;font-variant-numeric:lining-nums}

/* ───────── barra de pestañas ───────── */
.barra{position:fixed;left:50%;bottom:0;width:min(100%,480px);margin-left:max(-50%,-240px);z-index:20;display:grid;grid-template-columns:repeat(5,1fr);
  padding:6px 6px calc(6px + var(--abajo));background:var(--crema);box-shadow:0 -1px 0 var(--arena-osc),0 -12px 24px -18px rgba(90,60,20,.5)}
.barra button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:56px;font:500 12px/1 var(--sans);color:var(--tinta-3);border-radius:14px;transition:color .18s ease}
.barra button svg.i{transition:transform .22s var(--sale)}
.barra button:active svg.i{transform:scale(.88)}
.barra button.on{color:var(--verde-osc);font-weight:700}
.barra .pastilla{position:absolute;left:6px;top:9px;width:calc((100% - 12px)/5);height:30px;display:grid;place-items:center;pointer-events:none;transition:transform .34s var(--mueve)}
.barra .pastilla::before{content:"";width:56px;height:30px;border-radius:15px;background:#dfe3b4}

/* ───────── hoja de abajo ───────── */
.velo{position:fixed;inset:0;z-index:30;background:rgba(24,20,14,.5);opacity:0;transition:opacity .24s ease}
.velo.abierta{opacity:1}
.hoja{position:fixed;left:50%;bottom:0;width:min(100%,480px);margin-left:max(-50%,-240px);z-index:31;background:var(--crema);border-radius:26px 26px 0 0;padding:10px 20px calc(22px + var(--abajo));
  transform:translateY(105%);transition:transform .38s var(--cajon);box-shadow:0 -14px 40px -12px rgba(0,0,0,.4);touch-action:none;max-height:86dvh;overflow:auto;overscroll-behavior:contain}
.hoja.abierta{transform:none}
.hoja.arrastra{transition:none}
.hoja .asa{width:40px;height:4px;border-radius:2px;background:var(--arena-osc);margin:0 auto 16px}
.hoja .quien{display:flex;align-items:center;gap:14px}
.hoja .quien .cara{width:48px;height:48px;font-size:25px;outline-offset:3px;background:var(--arena-ico);--est-b:var(--est)}
.hoja h3{font:800 24px/1.1 var(--serif)}
.hoja .est{font-size:16px;color:var(--tinta-2);margin-top:2px}
.hoja ul{list-style:none;margin-top:16px}
.hoja li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--raya);font-size:15px;color:var(--tinta-2)}
.hoja li svg.i{width:20px;height:20px;margin-top:1px;color:var(--tinta-3)}
.hoja .bt{width:100%;margin-top:8px}
.hoja .e-curro{--est:#e0801c}.hoja .e-casa{--est:#5d9c58}.hoja .e-fuera{--est:#4f86cf}.hoja .e-nose{--est:#a39775}

/* ───────── mascotas ───────── */
#capa-mascotas{position:absolute;inset:0;pointer-events:none;z-index:15;overflow:hidden}
#capa-fija{position:fixed;left:50%;bottom:0;top:0;width:min(100%,480px);margin-left:max(-50%,-240px);pointer-events:none;z-index:21;overflow:hidden}
.mascota{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}
.m-in{position:relative;width:100%;height:100%;transform-origin:50% 100%}
.mascota svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 100%}
/* sombra de contacto: la mascota pisa de verdad la tarjeta, la rama o la barra */
.m-sombra,.sombra-suelo{position:absolute;height:12px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(38,26,8,.42),rgba(38,26,8,.2) 55%,rgba(38,26,8,0))}
.m-sombra{left:9%;right:9%;bottom:-6px;transition:opacity .16s ease,transform .16s ease}
.mascota.vuela .m-sombra{opacity:0;transform:scale(.55)}
.mascota[data-pose="echa"] .m-sombra,.mascota[data-pose="panza"] .m-sombra{left:3%;right:3%;height:14px;bottom:-7px}
.sombra-suelo{left:0;top:0}
.m-ventana{position:absolute;overflow:hidden;pointer-events:none}
.erizo-vuela{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}

.mascota g[class^="p-"]{display:none}
.mascota[data-pose="anda"] .p-anda,.mascota[data-pose="sienta"] .p-sienta,.mascota[data-pose="echa"] .p-echa,.mascota[data-pose="panza"] .p-panza{display:inline}
.mascota .pata,.mascota .baja,.mascota .cola,.mascota .punta,.mascota .cuello,.mascota .cabeza,.mascota .oreja,.mascota .lengua,.mascota .cuerpo{transform-box:fill-box}
.mascota .pata{transform-origin:50% 5%;transition:transform .14s ease-out}
.mascota .baja{transform-origin:50% 4%;transition:transform .14s ease-out}
.mascota .cuello{transform-origin:8% 92%;transition:transform .34s var(--sale)}
.mascota .cabeza{transform-origin:22% 78%;transition:transform .3s var(--sale)}
.mascota .oreja{transform-origin:50% 100%}
.mascota .lengua{display:none;transform-origin:50% 0}
.m-yali .lengua,.mascota.lame .lengua{display:inline}

/* siempre vivas: parpadean, mueven la cola en dos tramos (látigo) y de vez en cuando una oreja */
.mascota .parp{opacity:0;animation:parp 4.6s steps(1) infinite}
.mascota .ojo{animation:ojo 4.6s steps(1) infinite}
@keyframes ojo{0%,95.5%{opacity:1}96%,100%{opacity:0}}
@keyframes parp{0%,95.5%{opacity:0}96%,100%{opacity:1}}
.mascota .cola{transform-origin:100% 100%;animation:cola 2.4s ease-in-out infinite alternate}
.mascota .punta{transform-origin:25% 100%;animation:punta 2.4s ease-in-out -.6s infinite alternate}
.mascota .p-sienta .cola,.mascota .p-echa .cola,.mascota .p-panza .cola{transform-origin:100% 70%;animation-duration:1.7s}
.mascota .p-sienta .punta,.mascota .p-echa .punta,.mascota .p-panza .punta{transform-origin:100% 100%;animation-name:punta2;animation-duration:1.7s}
@keyframes cola{from{transform:rotate(-5deg)}to{transform:rotate(6deg)}}
@keyframes punta{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
@keyframes punta2{from{transform:rotate(-6deg)}to{transform:rotate(26deg)}}
.mascota .o2{animation:oreja 5.2s ease-in-out infinite}
.mascota .o1{animation:oreja 7.4s ease-in-out -2s infinite}
@keyframes oreja{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-13deg)}94%{transform:rotate(5deg)}97%{transform:rotate(-7deg)}}

/* andar: la pata gira en la cadera y dobla la rodilla al adelantarla */
.mascota.anda .pd,.mascota.anda .ptl{animation:paso var(--ciclo,.5s) linear infinite}
.mascota.anda .pt,.mascota.anda .pdl{animation:paso var(--ciclo,.5s) linear calc(var(--ciclo,.5s)/-2) infinite}
.mascota.anda .pd .baja,.mascota.anda .ptl .baja{animation:rodilla var(--ciclo,.5s) linear infinite}
.mascota.anda .pt .baja,.mascota.anda .pdl .baja{animation:rodilla var(--ciclo,.5s) linear calc(var(--ciclo,.5s)/-2) infinite}
.mascota.anda .cuerpo{animation:bote calc(var(--ciclo,.5s)/2) ease-in-out infinite alternate}
.mascota.anda .cuello{animation:cabecea calc(var(--ciclo,.5s)/2) ease-in-out infinite alternate}
@keyframes paso{0%{transform:rotate(calc(var(--zanca,16deg)*-1))}60%{transform:rotate(var(--zanca,16deg))}100%{transform:rotate(calc(var(--zanca,16deg)*-1))}}
@keyframes rodilla{0%,56%{transform:rotate(0)}76%{transform:rotate(var(--dobla,30deg))}100%{transform:rotate(0)}}
@keyframes bote{from{transform:translateY(0)}to{transform:translateY(1.3px)}}
@keyframes cabecea{from{transform:rotate(-1.5deg)}to{transform:rotate(2.5deg)}}

/* saltar */
.mascota.agacha .pata{transform:scaleY(.8)}
.mascota.agacha .cuello{transform:rotate(8deg)}
.mascota.salta .pd,.mascota.salta .pdl{transform:rotate(-50deg)}
.mascota.salta .pt,.mascota.salta .ptl{transform:rotate(44deg)}
.mascota.salta .pt .baja,.mascota.salta .ptl .baja{transform:rotate(18deg)}
.mascota.salta .cola{animation:none;transform:rotate(26deg)}
.mascota.salta .oreja{animation:none;transform:rotate(-10deg)}
.mascota.cae .pd,.mascota.cae .pdl{transform:rotate(-24deg)}
.mascota.cae .pt,.mascota.cae .ptl{transform:rotate(14deg)}

/* gestos */
.mascota.huele .cuello{transform:rotate(27deg) translate(1%,4%)}
.mascota.huele .cabeza{animation:husmea .26s ease-in-out infinite alternate}
@keyframes husmea{from{transform:translateY(0)}to{transform:translateY(1.2px) rotate(3deg)}}
.mascota.mira .cuello{transform:rotate(-12deg)}
.mascota.mira .cabeza{transform:rotate(-6deg)}
.mascota.ladea .cabeza{transform:rotate(-16deg)}
.mascota.zarpa .p-anda .pd{animation:zarpa .42s var(--sale) 1}
.mascota.zarpa .p-anda .pd .baja{animation:zarpa2 .42s var(--sale) 1}
@keyframes zarpa{0%{transform:rotate(0)}35%{transform:rotate(-84deg)}60%{transform:rotate(-40deg)}100%{transform:rotate(0)}}
@keyframes zarpa2{0%,100%{transform:rotate(0)}35%{transform:rotate(-30deg)}60%{transform:rotate(26deg)}}
.mascota.estira .pd,.mascota.estira .pdl{transform:rotate(-38deg)}
.mascota.estira .pt,.mascota.estira .ptl{transform:rotate(-9deg)}
.mascota.estira .cuello{transform:rotate(-22deg)}
.mascota.estira .cola{animation:none;transform:rotate(-24deg)}
/* sentada y lavándose: sube la pata a la boca y la lame */
.mascota.lame .p-sienta .pd{animation:lame-pata .9s ease-in-out infinite alternate}
.mascota.lame .p-sienta .pd .baja{transform:rotate(-58deg)}
.mascota.lame .p-sienta .cuello{animation:lame-cabeza .45s ease-in-out infinite alternate}
@keyframes lame-pata{from{transform:rotate(-56deg)}to{transform:rotate(-66deg)}}
@keyframes lame-cabeza{from{transform:rotate(20deg)}to{transform:rotate(29deg)}}
/* tumbada: respira; panza arriba: patalea */
.mascota[data-pose="echa"] svg,.mascota[data-pose="sienta"] svg{animation:respira 2.8s ease-in-out infinite alternate}
@keyframes respira{from{transform:scale(1,1)}to{transform:scale(1.012,1.03)}}
.mascota .p-panza .pata{transform-origin:50% 100%;animation:patalea .62s ease-in-out infinite alternate}
.mascota .p-panza .pt,.mascota .p-panza .pdl{animation-delay:-.31s}
@keyframes patalea{from{transform:rotate(-13deg)}to{transform:rotate(15deg)}}
.zeta{position:absolute;left:10%;top:-6%;font:700 12px/1 var(--sans);color:var(--tinta-3);opacity:0;animation:zeta 2.8s ease-out infinite}
.zeta+.zeta{animation-delay:1.4s;font-size:10px}
@keyframes zeta{0%{opacity:0;transform:translate(0,0)}20%{opacity:.8}100%{opacity:0;transform:translate(-9px,-20px)}}
/* Yali */
.m-yali .lengua{animation:jadea .34s ease-in-out infinite alternate}
@keyframes jadea{from{transform:scaleY(.84)}to{transform:scaleY(1.08)}}
.m-yali .cola{transform-origin:100% 50%}
.m-yali .punta{transform-origin:100% 0%}
.m-yali.menea .cola{animation:menea .3s ease-in-out infinite alternate}
.m-yali.menea .punta{animation:menea .3s ease-in-out -.08s infinite alternate}
@keyframes menea{from{transform:rotate(-13deg)}to{transform:rotate(15deg)}}
.m-yali.lleva .cabeza .hueso{display:inline !important}
.m-yali.lleva .lengua{display:none}
.m-yali.lleva .p-echa>.hueso{display:none}
.m-yali.roe .cuello{animation:roe .46s ease-in-out infinite alternate}
.m-yali.roe .lengua{display:none}
@keyframes roe{from{transform:rotate(15deg) translate(1%,3%)}to{transform:rotate(21deg) translate(1%,5%)}}
.m-yali.sacude .cuerpo{animation:sacude .085s linear infinite alternate}
.m-yali.sacude .cabeza{animation:sacude2 .085s linear infinite alternate}
.m-yali.sacude .oreja{animation:aletea .085s linear infinite alternate}
@keyframes sacude{from{transform:rotate(-2.4deg)}to{transform:rotate(2.4deg)}}
@keyframes sacude2{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@keyframes aletea{from{transform:rotate(-24deg)}to{transform:rotate(20deg)}}

/* panel de pruebas (solo con ?demo) */
.panel-demo{display:none}
.demo .panel-demo{display:flex;position:fixed;right:8px;top:8px;z-index:40;gap:4px;padding:5px;border-radius:14px;background:rgba(20,30,20,.72)}
.panel-demo button{padding:8px 9px;border-radius:10px;background:var(--sv);font:600 12px/1 var(--sans);color:var(--verde-osc)}

/* ───────── modo ligero y «reducir movimiento» ───────── */
.ligero .tarj,.ligero .loseta{box-shadow:0 0 0 1px rgba(120,90,40,.12)}
.ligero .barra{box-shadow:0 -1px 0 var(--arena-osc)}
.ligero .mece .racimo{animation:none}
.ligero .vista.entra .cab-txt,.ligero .vista.entra .cuerpo{animation-duration:.16s}
.ligero .mascota .ojo,.ligero .mascota .parp,.ligero .mascota .oreja,.ligero .mascota.anda .cuerpo,.ligero .mascota.anda .cuello{animation:none}
.ligero .barra .pastilla{transition-duration:.2s}
@media (prefers-reduced-motion:reduce){
  .mece .racimo{animation:none}
  .vista.entra .cab-txt,.vista.entra .cuerpo{animation:funde .2s ease both}
  .barra .pastilla,.hoja,.pliega{transition-duration:.01s}
  .silla:active,.bt:active,.op:active,button.loseta:active{transform:none}
  @keyframes funde{from{opacity:0}to{opacity:1}}
}
@media (hover:hover) and (pointer:fine){
  .silla:hover{background:rgba(243,234,214,.13)}
  .bt.si:hover{background:#34663d}
  .mas:hover{text-decoration:underline;text-underline-offset:3px}
  .barra button:hover{color:var(--verde-osc)}
}