:root{
  --ink:#3f2f6b; --purple:#8f74d3; --purple2:#6f57b0; --chromeb:#4f3a8f;
  --cream:#fbf5e8; --cardb:#e3d4b4;
  --coin:#ffcf4a; --green:#7fd27a; --greenb:#3f9a4a;
  --hunger:#ffa94d; --hygiene:#4fc3e8; --energy:#a58bff; --fun:#ff7fae;
  --bad:#ff5d5d;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#6f57b0;overscroll-behavior:none}
body{font-family:'Fredoka',system-ui,sans-serif;color:var(--ink);overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;padding:0}
button:focus{outline:none}
button:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* fija a los bordes reales de la pantalla: en la app instalada de iPhone 100dvh se quedaba corto y dejaba una franja abajo */
.app{position:fixed;top:0;bottom:0;left:0;right:0;width:100%;max-width:440px;margin:0 auto;overflow:hidden;background:#b7e6dd;display:flex;flex-direction:column}

/* ---------- HUD ---------- */
.hud{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  padding:calc(env(safe-area-inset-top) + 10px) 10px 0;pointer-events:none}
.hud > *{pointer-events:auto}
.who{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.petName{padding-left:4px;font-size:30px;font-weight:700;line-height:1;color:#fff;max-width:56vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 2px 0 rgba(63,47,107,.55),0 3px 10px rgba(63,47,107,.35)}
.lvl{height:42px;background:rgba(63,47,107,.88);color:#fff;border-radius:21px;padding:0 14px;font-size:17px;font-weight:700;display:flex;align-items:center;gap:10px;box-shadow:0 3px 0 rgba(30,20,60,.25)}
.xpbar{width:96px;height:10px;border-radius:6px;background:rgba(255,255,255,.25);overflow:hidden}
.xpbar i{display:block;height:100%;width:0;background:var(--coin);transition:width .4s}
.roomTitle{display:none}
.side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.stats{display:flex;flex-direction:column;gap:10px;margin:14px 4px 0 0}
.stat{position:relative;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.92);
  box-shadow:0 3px 0 rgba(63,47,107,.25);display:grid;place-items:center}
.stat svg{position:absolute;left:3px;top:3px;width:44px;height:44px;transform:rotate(-90deg)}
.stat circle{fill:none;stroke-width:4}
.stat .track{stroke:#ece6f6}
.stat .ring{stroke-linecap:round;stroke-dasharray:94.25;stroke-dashoffset:0;transition:stroke-dashoffset .4s,stroke .3s}
.stat[data-k=hunger] .ring{stroke:var(--hunger)} .stat[data-k=hygiene] .ring{stroke:var(--hygiene)}
.stat[data-k=energy] .ring{stroke:var(--energy)} .stat[data-k=fun] .ring{stroke:var(--fun)}
.stat span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:21px;line-height:1}
.stat.low{animation:pulse 1s infinite}
.stat.low .ring{stroke:var(--bad)}
@keyframes pulse{50%{transform:scale(1.08)}}
.stat:active{transform:translateY(2px)}
.coins{height:42px;display:flex;align-items:center;gap:6px;background:#fff;border-radius:20px;padding:6px 6px 6px 8px;
  box-shadow:0 3px 0 rgba(63,47,107,.25);font-weight:700}
.coins b{font-variant-numeric:tabular-nums;min-width:32px;text-align:right;color:#6a4b00}
.coins em{font-style:normal;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:700;line-height:1}
.coin{display:inline-block;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1b8,var(--coin) 60%);border:2px solid #e0a92e;flex:0 0 auto}
.bump{animation:bump .35s}
@keyframes bump{50%{transform:scale(1.18)}}

/* ---------- Escena ---------- */
.scene{position:relative;flex:1;overflow:hidden}
.bg{position:absolute;inset:0;background-position:center top;background-size:cover;background-repeat:no-repeat;transition:filter .4s}
.bg.swap{animation:swap .35s ease}
@keyframes swap{from{opacity:.2;transform:scale(1.03)}to{opacity:1}}
.arrow{position:absolute;z-index:6;top:46%;width:40px;height:56px;border-radius:14px;background:rgba(255,255,255,.75);
  font-size:34px;line-height:1;font-weight:700;color:var(--purple2);box-shadow:0 3px 0 rgba(63,47,107,.2)}
.arrow.left{left:6px}.arrow.right{right:6px}
.arrow:active{transform:translateY(2px)}

.pet{position:absolute;left:50%;bottom:19%;width:min(76vw,300px);transform:translateX(-50%);z-index:5}
.pet .shadow{position:absolute;left:12%;right:12%;bottom:-4%;height:12%;border-radius:50%;background:radial-gradient(rgba(60,40,80,.35),transparent 70%)}
.body{position:relative;transform-origin:50% 100%;animation:breathe 3.2s ease-in-out infinite}
.body img{display:block;width:100%;pointer-events:none}
.body .blinkimg{position:absolute;inset:0;opacity:0}
.body.blinking .blinkimg,.body.eyesClosed .blinkimg{opacity:1}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,.975)}}
.body.tickle{animation:tickle .5s ease}
@keyframes tickle{20%{transform:scale(1.08,.9)}45%{transform:scale(.94,1.06) rotate(-3deg)}70%{transform:scale(1.03,.97) rotate(2deg)}}
.body.chew{animation:chew .18s ease 4}
@keyframes chew{50%{transform:scale(1.04,.95)}}
.body.no{animation:no .5s ease}
@keyframes no{25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
.body.sleep{animation:breathe 5s ease-in-out infinite}
.body.sick img:first-child{filter:saturate(.55) hue-rotate(-20deg) brightness(.95)}
.body.jump{animation:jump .6s ease}
@keyframes jump{40%{transform:translateY(-18%) scale(.96,1.05)}70%{transform:translateY(0) scale(1.06,.94)}}

.dirt{position:absolute;inset:8% 10%;pointer-events:none;opacity:0;transition:opacity .4s;
  background:
   radial-gradient(circle at 22% 62%,rgba(110,80,50,.55) 0 6%,transparent 7%),
   radial-gradient(circle at 72% 48%,rgba(110,80,50,.5) 0 5%,transparent 6%),
   radial-gradient(circle at 58% 80%,rgba(110,80,50,.5) 0 7%,transparent 8%),
   radial-gradient(circle at 35% 30%,rgba(110,80,50,.45) 0 4%,transparent 5%),
   radial-gradient(circle at 80% 72%,rgba(110,80,50,.45) 0 4%,transparent 5%);
  mix-blend-mode:multiply;border-radius:40%}
.foam{position:absolute;inset:0;pointer-events:none}
.foam i{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#e8f6ff 55%,#bfe4f7);
  box-shadow:inset -2px -2px 4px rgba(120,170,210,.4);animation:pop .25s ease-out}
@keyframes pop{from{transform:scale(0)}}
.sickfx{position:absolute;top:-4%;right:4%;font-size:30px;display:none;animation:float 2s ease-in-out infinite}
.body.sick .sickfx{display:block}
@keyframes float{50%{transform:translateY(-6px)}}

.bubble{position:absolute;left:50%;bottom:102%;transform:translateX(-50%) scale(0);transform-origin:50% 100%;
  background:#fff;border-radius:16px;padding:8px 12px;font-weight:600;font-size:14px;white-space:nowrap;
  box-shadow:0 4px 0 rgba(63,47,107,.18);transition:transform .2s}
.bubble::after{content:'';position:absolute;left:50%;top:100%;margin-left:-8px;border:8px solid transparent;border-top-color:#fff}
.bubble.show{transform:translateX(-50%) scale(1)}
.zzz{position:absolute;right:-4%;top:-6%;display:none;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.4)}
.zzz b{position:absolute;animation:zz 3s infinite;opacity:0}
.zzz b:nth-child(1){font-size:30px;animation-delay:0s}.zzz b:nth-child(2){font-size:22px;animation-delay:1s}.zzz b:nth-child(3){font-size:16px;animation-delay:2s}
@keyframes zz{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}100%{opacity:0;transform:translate(26px,-60px)}}
.pet.sleeping .zzz{display:block}

.night{position:absolute;inset:0;z-index:7;pointer-events:none;background:radial-gradient(ellipse at 50% 70%,rgba(20,15,50,.55),rgba(10,8,30,.85));opacity:0;transition:opacity .6s}
.night.on{opacity:1}
.water{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(100deg,transparent 0 14px,rgba(160,215,255,.55) 14px 16px);background-size:200% 200%}
.water.on{opacity:1;animation:rain .35s linear infinite}
@keyframes rain{to{background-position:-30px 60px}}

/* ---------- Herramientas por habitación ---------- */
.tools{position:absolute;left:0;right:0;bottom:10px;z-index:8;padding:0 10px}
.tray{display:flex;gap:8px;overflow-x:auto;padding:8px;background:rgba(255,255,255,.88);border-radius:20px;
  box-shadow:0 4px 0 rgba(63,47,107,.2);scrollbar-width:none}
.tray::-webkit-scrollbar{display:none}
.item{position:relative;flex:0 0 auto;width:62px;height:62px;border-radius:16px;background:var(--cream);border:2px solid var(--cardb);
  display:grid;place-items:center;font-size:32px;touch-action:none}
.item small{position:absolute;right:-4px;top:-6px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:var(--purple2);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.item.empty{opacity:.35}
.item.add{font-size:28px;color:var(--purple2);border-style:dashed;font-weight:700}
.hint{text-align:center;font-size:13px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45);margin-bottom:6px}
.btnRow{display:flex;gap:10px;justify-content:center}
.big{min-width:120px;height:56px;padding:0 18px;border-radius:18px;background:linear-gradient(#fff,#f1ebfb);font-weight:700;font-size:16px;
  box-shadow:0 5px 0 rgba(63,47,107,.3);display:flex;align-items:center;justify-content:center;gap:8px}
.big b{font-size:24px}
.big:active,.big.active{transform:translateY(3px);box-shadow:0 2px 0 rgba(63,47,107,.3)}
.big.active{background:linear-gradient(#d9f5ff,#bfe8fb)}
.big.green{background:linear-gradient(#9fe39a,var(--green));color:#14501f;box-shadow:0 5px 0 var(--greenb)}
.big:disabled{opacity:.45}
.games{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gcard{background:rgba(255,255,255,.92);border-radius:18px;padding:10px 6px;text-align:center;box-shadow:0 4px 0 rgba(63,47,107,.2)}
.gcard b{display:block;font-size:30px}
.gcard span{display:block;font-weight:700;font-size:13px}
.gcard em{display:block;font-style:normal;font-size:11px;opacity:.7}
.gcard:active{transform:translateY(3px)}
.soapCursor{position:fixed;z-index:60;font-size:44px;pointer-events:none;transform:translate(-50%,-50%);display:none}

/* ---------- Menú ---------- */
.nav{position:relative;z-index:30;display:flex;background:linear-gradient(#7c63c2,var(--purple2));padding:5px 4px max(5px, calc(env(safe-area-inset-bottom) - 16px));gap:2px}
.nav button{flex:1;min-width:0;color:#fff;font-weight:600;font-size:12px;padding:6px 0 5px;border-radius:16px;display:flex;flex-direction:column;align-items:center;gap:3px;white-space:nowrap}
.nav button b{font-size:30px;line-height:1}
.nav button.on{background:rgba(255,255,255,.2)}
.nav button:active{transform:translateY(2px)}

/* ---------- Hojas ---------- */
.sheet{position:absolute;inset:0;z-index:50;background:rgba(25,15,50,.55);display:flex;align-items:flex-end;animation:fade .2s}
.sheet[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.sheetCard{width:100%;max-height:82%;background:var(--cream);border-radius:24px 24px 0 0;display:flex;flex-direction:column;animation:up .25s ease;padding-bottom:env(safe-area-inset-bottom)}
@keyframes up{from{transform:translateY(40px)}}
.sheetHead{flex:0 0 auto;display:flex;align-items:center;padding:14px 16px 6px}
.sheetHead h2{flex:1;margin:0;font-size:20px}
.x{width:36px;height:36px;border-radius:12px;background:#fff;font-weight:700;box-shadow:0 3px 0 rgba(63,47,107,.2)}
.tabs{flex:0 0 auto;display:flex;gap:4px;margin:4px 14px 12px;padding:4px;background:#ece3d0;border-radius:16px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:1 0 auto;height:36px;padding:0 12px;border-radius:12px;font-weight:600;font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center;white-space:nowrap;color:var(--ink);transition:background .2s,color .2s}
.tabs button.on{background:var(--purple2);color:#fff;box-shadow:0 2px 6px rgba(79,58,143,.35)}
.tabs button:focus{outline:none}
.tabs button:focus-visible{outline:2px solid var(--purple2);outline-offset:2px}
.sheetBody{overflow-y:auto;padding:4px 14px 18px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.card{background:#fff;border:2px solid var(--cardb);border-radius:16px;padding:8px 6px;text-align:center;position:relative}
.card .ic{font-size:34px;height:44px;display:grid;place-items:center}
.card .ic img{height:52px}
.card .nm{font-weight:600;font-size:12px;line-height:1.15;min-height:28px;display:grid;place-items:center}
.card .ef{font-size:11px;opacity:.7}
.card button{margin-top:6px;width:100%;border-radius:10px;padding:5px 0;background:var(--green);color:#14501f;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;gap:4px;box-shadow:0 3px 0 var(--greenb)}
.card button .coin{width:14px;height:14px;border-width:1.5px}
.card button:disabled{background:#ddd;color:#888;box-shadow:0 3px 0 #bbb}
.card.locked{opacity:.55}
.card .own{position:absolute;top:4px;right:6px;font-size:11px;font-weight:700;color:var(--purple2)}
.card .sw{width:44px;height:44px;border-radius:12px;margin:0 auto;border:3px solid #fff;box-shadow:0 0 0 2px var(--cardb)}
.card.sel{border-color:var(--purple2);box-shadow:0 0 0 2px var(--purple2)}
.rar{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.rar.común{color:#7a8a99}.rar.rara{color:#3b8ff0}.rar.épica{color:#a35bf0}.rar.legendaria{color:#e69500}
.boxHero{text-align:center;padding:10px 0 4px}
.boxHero .bx{font-size:80px;display:inline-block}
.boxHero .bx.shake{animation:shake .6s ease 2}
@keyframes shake{25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
.reveal{text-align:center;padding:8px}
.reveal img{height:160px;animation:popin .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes popin{from{transform:scale(0) rotate(-20deg)}}
.row{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:10px 12px;margin-bottom:8px;border:2px solid var(--cardb)}
.row .grow{flex:1}
.row label{font-weight:600}
.row input{font:inherit;border:2px solid var(--cardb);border-radius:10px;padding:6px 10px;width:150px}
.danger{color:#c0392b;font-weight:700}

/* ---------- Minijuego ---------- */
.game{position:absolute;inset:0;z-index:70;background:#7fc9ef}
.game[hidden]{display:none}
.game canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.gameHud{position:absolute;z-index:2;top:calc(env(safe-area-inset-top) + 10px);left:10px;right:10px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:22px;color:#fff;text-shadow:0 2px 3px rgba(0,0,0,.35)}
.gameHud .x{color:var(--ink);text-shadow:none;font-size:16px}
.gameHud #gameScore{flex:1;text-align:center}
.gameMsg{position:absolute;z-index:3;left:50%;top:40%;transform:translate(-50%,-50%);background:#fff;border-radius:22px;padding:18px 22px;text-align:center;min-width:240px;box-shadow:0 6px 0 rgba(63,47,107,.3)}
.gameMsg h3{margin:0 0 4px;font-size:24px}
.gameMsg p{margin:4px 0 12px}
.gameMsg .big{margin:0 auto}
.gameBtns{display:flex;gap:10px}
.gameBtns .big{flex:1;min-width:0;margin:0;height:50px;font-size:16px}

/* ---------- Varios ---------- */
.toast{position:absolute;z-index:90;left:50%;top:22%;transform:translate(-50%,-10px);background:rgba(40,28,80,.92);color:#fff;
  padding:10px 16px;border-radius:16px;font-weight:600;font-size:15px;opacity:0;pointer-events:none;transition:.25s;text-align:center;max-width:86%}
.toast.show{opacity:1;transform:translate(-50%,0)}
.drag{position:fixed;z-index:80;font-size:48px;pointer-events:none;transform:translate(-50%,-60%);display:none;filter:drop-shadow(0 6px 6px rgba(0,0,0,.25))}
.fly{position:absolute;z-index:40;pointer-events:none;font-weight:700;color:#fff;text-shadow:0 2px 3px rgba(0,0,0,.4);animation:flyup 1s ease-out forwards}
@keyframes flyup{to{transform:translateY(-60px);opacity:0}}
.hearts{position:absolute;pointer-events:none;font-size:22px;animation:flyup 1.1s ease-out forwards;z-index:9}

/* ---------- Colección ---------- */
.collProg{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-weight:700;font-size:13px}
.collProg .bar{flex:1;height:10px;border-radius:6px;background:#e9e1d0;overflow:hidden}
.collProg .bar i{display:block;height:100%;background:linear-gradient(90deg,#b49cff,var(--purple2));border-radius:6px}
.coll{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ccard{--rc:#c9d2db;position:relative;background:#fff;border:3px solid var(--rc);border-radius:20px;padding:10px 10px 12px;text-align:center;box-shadow:0 4px 0 rgba(63,47,107,.12)}
.ccard.rara{--rc:#8cc2ff}.ccard.épica{--rc:#c9a0ff}.ccard.legendaria{--rc:#ffcf6a}
.ccard .cimg{position:relative;height:120px;display:grid;place-items:center;border-radius:14px;background:radial-gradient(circle at 50% 60%,#fff,#f3eee3)}
.ccard .cimg img{max-height:110px;max-width:100%}
.ccard.locked .cimg img{filter:brightness(0) opacity(.18)}
.ccard .lock{position:absolute;font-size:30px}
.ccard .cname{font-weight:700;font-size:15px;margin-top:6px}
.ccard button{margin-top:8px;width:100%;border-radius:12px;padding:7px 0;background:var(--green);color:#14501f;font-weight:700;font-size:13px;box-shadow:0 3px 0 var(--greenb)}
.ccard button:disabled{background:#efe9fb;color:var(--purple2);box-shadow:0 3px 0 #d8cdf3}
.ccard button.get{background:#fff4d6;color:#8a6200;box-shadow:0 3px 0 #ecd28c}
.ccard.sel{box-shadow:0 0 0 3px var(--purple2),0 4px 0 rgba(63,47,107,.12)}
.empty{text-align:center;font-weight:600;padding:20px 0}

.gamesRow{display:flex;gap:8px}
.gamesRow .gcard{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;height:64px;padding:4px 2px}
.gamesRow .gcard b{font-size:24px;line-height:1}
.gamesRow .gcard span{font-size:12px}
.gamesRow .gcard em{font-size:10px}
.gamesRow .gear{flex:0 0 52px}

.account{flex-wrap:wrap}
.account img{width:40px;height:40px;border-radius:50%}
.account small{opacity:.7;font-size:12px}
.account .gbtn{width:100%;display:flex;justify-content:center;min-height:44px}

/* ---------- Entrada ---------- */
.login{position:absolute;inset:0;z-index:100;display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0;
  background:radial-gradient(circle at 50% 30%,#b9a5e3,#6f57b0 70%)}
.login[hidden]{display:none}
.loginCard{width:100%;max-width:340px;text-align:center;color:#fff}
.loginPet{width:170px;animation:breathe 3.2s ease-in-out infinite;transform-origin:50% 100%;filter:drop-shadow(0 12px 18px rgba(40,25,90,.4))}
.login h1{margin:10px 0 4px;font-size:44px;line-height:1;text-shadow:0 3px 0 rgba(63,47,107,.5)}
.login p{margin:0 0 22px;font-weight:600;opacity:.92}
.loginBtn{display:flex;justify-content:center;min-height:44px}
.loginMsg{margin-top:14px !important;font-size:13px;opacity:.85;min-height:18px}
.credit{display:inline-flex;align-items:center;gap:6px;margin:0 0 18px;padding:7px 14px;border-radius:20px;background:rgba(255,255,255,.18);
  color:#fff;text-decoration:none;font-weight:600;font-size:14px;border:1px solid rgba(255,255,255,.35)}
.credit b{font-weight:700}
.credit:active{transform:translateY(1px)}
.login p{margin:0 0 14px}

/* ---------- Guía de instalación ---------- */
.installLink{margin-top:18px;color:#fff;font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:3px;opacity:.95}
.guide{position:absolute;inset:0;z-index:110;background:rgba(25,15,50,.6);display:flex;align-items:flex-end;animation:fade .2s}
.guide[hidden]{display:none}
.guideCard{width:100%;max-height:92%;background:var(--cream);border-radius:24px 24px 0 0;display:flex;flex-direction:column;animation:up .25s ease;padding-bottom:env(safe-area-inset-bottom)}
.guideIntro{margin:0 16px 6px;font-size:14px;opacity:.8}
.guideBody{overflow-y:auto;padding:4px 16px 22px}
.step{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.step .n{flex:0 0 30px;height:30px;border-radius:50%;background:var(--purple2);color:#fff;font-weight:700;display:grid;place-items:center}
.step .t{flex:1}
.step .t .st{display:block;font-size:16px;font-weight:700;margin:3px 0 4px}
.step .t p{margin:0 0 8px;font-size:14px;opacity:.85}
.step img{display:block;width:100%;max-width:210px;border-radius:18px;box-shadow:0 6px 18px rgba(63,47,107,.18);border:1px solid var(--cardb)}
.guideNote{font-size:13px;background:#fff;border:2px solid var(--cardb);border-radius:14px;padding:10px 12px;margin-top:4px}
.installNow{margin:6px 0 14px}

/* ---------- Ventana de confirmación ---------- */
.modal{position:absolute;inset:0;z-index:120;background:rgba(25,15,50,.6);display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .2s}
.modalCard{width:100%;max-width:340px;background:var(--cream);border-radius:24px;padding:22px 20px 18px;text-align:center;box-shadow:0 8px 0 rgba(63,47,107,.3);animation:popin .3s cubic-bezier(.2,1.4,.4,1)}
.modalIcon{font-size:44px;line-height:1}
.modalCard h3{margin:8px 0 6px;font-size:22px}
.modalCard p{margin:0 0 14px;font-size:14px;opacity:.85}
.modalCard label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.modalCard input{width:100%;font:inherit;font-size:20px;font-weight:700;text-align:center;letter-spacing:3px;padding:10px;border:3px solid var(--cardb);border-radius:14px;background:#fff;color:var(--ink);text-transform:uppercase}
.modalCard input:focus{outline:none;border-color:var(--bad)}
.modalBtns{display:flex;gap:10px;margin-top:16px}
.modalBtns .big{flex:1;min-width:0;height:50px;font-size:15px}
.big.danger{background:linear-gradient(#ff7b7b,#e04848);color:#fff;box-shadow:0 5px 0 #a82e2e}
.big.danger:disabled{opacity:.4}

/* ---------- Amigos ---------- */
.friendsBtn{position:relative;display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:18px;background:rgba(255,255,255,.92);font-weight:700;font-size:14px;box-shadow:0 3px 0 rgba(63,47,107,.25)}
.friendsBtn i{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--bad);color:#fff;font-style:normal;font-size:12px;display:grid;place-items:center}
.friendsBtn i[hidden]{display:none}
.addFriend{display:flex;gap:8px}
.addFriend input{flex:1;min-width:0;font:inherit;font-size:16px;padding:10px 12px;border:2px solid var(--cardb);border-radius:14px;background:#fff;color:var(--ink)}
.addFriend input:focus{outline:none;border-color:var(--purple2)}
.addFriend .big{min-width:0;height:46px;padding:0 16px;font-size:15px}
.friendHint{font-size:12px;opacity:.7;margin:6px 2px 10px}
.fTitle{margin:14px 2px 8px;font-size:15px}
.friend{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--cardb);border-radius:16px;padding:8px 10px;margin-bottom:8px}
.friend .av{width:40px;height:40px;border-radius:50%;flex:0 0 40px;display:grid;place-items:center;background:#eee;font-size:20px;object-fit:cover}
.friend .grow{flex:1;min-width:0}
.friend .grow b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.friend small{display:block;font-size:12px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbtn{height:36px;min-width:36px;padding:0 10px;border-radius:12px;background:#f1ebfb;font-weight:700;font-size:14px;box-shadow:0 2px 0 rgba(63,47,107,.15)}
.fbtn.ok{background:var(--green);color:#14501f}
.fbtn.visit{background:var(--purple2);color:#fff}

/* ---------- Visita ---------- */
.visit{position:absolute;inset:0;z-index:60;overflow:hidden;animation:fade .25s}
.visit .vbg{position:absolute;inset:0;background-size:cover;background-position:center top}
.vtop{position:absolute;top:calc(env(safe-area-inset-top) + 10px);left:10px;right:10px;display:flex;align-items:center;gap:10px;z-index:3}
.vtop .x{width:42px;height:42px;font-size:26px;line-height:1}
.vwho{display:flex;align-items:center;gap:8px;background:rgba(63,47,107,.88);color:#fff;border-radius:22px;padding:5px 14px 5px 5px}
.vwho img{width:32px;height:32px;border-radius:50%}
.vwho small{display:block;font-size:11px;opacity:.8}
.vwho b{font-size:16px}
.vstats{position:absolute;top:calc(env(safe-area-inset-top) + 66px);right:10px;display:flex;flex-direction:column;gap:10px;z-index:3}
.vstat{position:relative;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 3px 0 rgba(63,47,107,.25)}
.vstat svg{position:absolute;left:3px;top:3px;width:40px;height:40px;transform:rotate(-90deg)}
.vstat circle{fill:none;stroke-width:4}.vstat .track{stroke:#ece6f6}
.vstat .ring{stroke-linecap:round;stroke-dasharray:94.25}
.vstat .ring.hunger{stroke:var(--hunger)}.vstat .ring.hygiene{stroke:var(--hygiene)}.vstat .ring.energy{stroke:var(--energy)}.vstat .ring.fun{stroke:var(--fun)}
.vstat span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:19px;line-height:1}
.vpet{position:absolute;left:50%;bottom:30%;width:min(68vw,280px);transform:translateX(-50%);z-index:2}
.vpet img{display:block;width:100%;transform-origin:50% 100%;animation:breathe 3.2s ease-in-out infinite}
.vpet img.hop{animation:jump .6s ease}
.vpet .shadow{position:absolute;left:12%;right:12%;bottom:-4%;height:12%;border-radius:50%;background:radial-gradient(rgba(60,40,80,.35),transparent 70%)}
.vpet.sick img{filter:saturate(.55) hue-rotate(-20deg)}
.vpet.sleeping img{animation:breathe 5s ease-in-out infinite}
.visit .night{z-index:1}
.vcard{position:absolute;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom) + 12px);z-index:3;background:rgba(251,245,232,.96);border-radius:22px;padding:14px 16px;box-shadow:0 5px 0 rgba(63,47,107,.25)}
.vname{font-size:22px;font-weight:700;display:flex;align-items:center;gap:8px}
.lvlTag{font-size:12px;background:var(--purple2);color:#fff;border-radius:10px;padding:3px 8px}
.vline{font-size:14px;margin-top:4px;opacity:.9}
.vcard .big{width:100%;margin-top:12px;height:48px}

/* ---------- Podio ---------- */
.podium{margin:4px 0 14px;text-align:left}
.podTitle{font-weight:700;font-size:15px;text-align:center;margin-bottom:8px}
.pod{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:14px;margin-bottom:6px;background:#f6f1e6}
.pod.p1{background:linear-gradient(90deg,#fff1c2,#fff8e1)}
.pod.p2{background:linear-gradient(90deg,#eceff3,#f7f8fa)}
.pod.p3{background:linear-gradient(90deg,#f7dcc6,#fcefe4)}
.pod.me{box-shadow:0 0 0 2px var(--purple2)}
.pod.mine{background:#efe9fb}
.pod .medal{font-size:22px;min-width:28px;text-align:center;font-weight:700}
.pod img{width:28px;height:28px;object-fit:contain}
.pod .who{flex:1;min-width:0;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pod b{font-variant-numeric:tabular-nums}
.gameMsg{max-width:calc(100% - 32px);width:320px}

/* ---------- Notificaciones ---------- */
.hudBtns{display:flex;gap:8px}
.friendsBtn.bell{padding:0;width:36px;justify-content:center;font-size:17px}
.pushCard{background:#fff;border:2px solid var(--cardb);border-radius:18px;padding:12px 14px}
.pushCard b{font-size:16px}
.pushCard p{margin:4px 0 10px;font-size:13px;opacity:.8}
.pushCard .big{width:100%;height:46px}
.notif{display:flex;gap:10px;align-items:flex-start;background:#fff;border:2px solid var(--cardb);border-radius:16px;padding:10px 12px;margin-bottom:8px;cursor:pointer}
.notif.unread{border-color:var(--purple2);background:#f7f3ff}
.notif .ni{font-size:24px;line-height:1.2}
.notif .grow{flex:1;min-width:0}
.notif b{display:block;font-size:14px}
.notif small{display:block;font-size:13px;opacity:.8}
.notif em{display:block;font-style:normal;font-size:11px;opacity:.55;margin-top:2px}

.fcard{cursor:pointer;padding:10px}
.fcard .ftop{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.fcard .fpet{width:48px;height:48px;object-fit:contain;flex:0 0 48px}
.factions{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.fdel,.fvisit{height:36px;padding:0 12px;border-radius:12px;background:#f1ebfb;color:var(--ink);font-weight:700;font-size:14px;box-shadow:0 2px 0 rgba(63,47,107,.15)}
.fvisit{background:var(--green);color:#14501f;box-shadow:0 2px 0 var(--greenb)}
.fcard .av{width:48px;height:48px;flex:0 0 48px;font-size:24px}

/* ---------- Anuncios ---------- */
.adBox{position:absolute;inset:0;z-index:130;background:rgba(10,6,25,.85);display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .2s}
.adCard{width:100%;max-width:340px;background:#fff;border-radius:22px;padding:14px;text-align:center}
.adCard small{display:block;text-align:left;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;opacity:.5;margin-bottom:8px}
.adSlot{height:260px;border-radius:14px;background:repeating-linear-gradient(45deg,#f3eefc,#f3eefc 12px,#ebe3fa 12px,#ebe3fa 24px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:50px}
.adSlot b{font-size:16px}.adSlot span{font-size:13px;opacity:.6}
.adBar{height:6px;border-radius:4px;background:#eee;overflow:hidden;margin:12px 0}
.adBar i{display:block;height:100%;width:0;background:var(--purple2);transition:width .1s linear}
.adCard .big{width:100%;height:50px}
.big.gold{background:linear-gradient(#ffe48a,#ffc93c);color:#6a4b00;box-shadow:0 5px 0 #d9a21f}
.reviveHint{font-size:14px;opacity:.85}
.gameMsg .reviveBtn,.gameMsg .doubleBtn{width:100%;margin:0 0 10px;height:52px;font-size:16px}
.coinAd{display:flex;align-items:center;gap:12px;background:linear-gradient(90deg,#fff6d6,#fffbea);border:2px solid #f0d27a;border-radius:16px;padding:10px 12px;margin-bottom:12px}
.coinAd .grow{flex:1}.coinAd b{display:block}.coinAd small{font-size:12px;opacity:.75}
.coinAd .big{min-width:0;height:44px;padding:0 14px;font-size:14px}
.adLoading{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 18px}
.adSpin{width:40px;height:40px;border-radius:50%;border:4px solid #ece6f6;border-top-color:var(--purple2);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.adLoading .big{width:100%;height:48px}

/* ---------- Portada pública ---------- */
.landing{max-width:440px;margin:0 auto;color:#fff;padding:calc(env(safe-area-inset-top) + 28px) 18px calc(env(safe-area-inset-bottom) + 24px)}
.lhero{text-align:center;padding-bottom:18px}
.ltag{font-size:16px;line-height:1.4;margin:0 auto 14px !important;max-width:330px}
.lfree{font-size:13px;opacity:.85;margin:12px 0 0 !important}
.lsec{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:22px;padding:18px 16px;margin-top:16px}
.lsec h2{margin:0 0 10px;font-size:22px}
.lsub{font-size:14px;line-height:1.4;opacity:.9;margin:0 0 12px !important}
.lsteps{display:grid;gap:10px}
.lsteps article{background:rgba(255,255,255,.95);color:var(--ink);border-radius:16px;padding:12px 14px}
.lsteps b{font-size:26px}
.lsteps h3{margin:2px 0 4px;font-size:17px}
.lsteps p{margin:0 !important;font-size:14px;line-height:1.4;font-weight:500;opacity:1}
.lcrit{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.lcrit figure,.lrooms figure{margin:0;text-align:center}
.lcrit img{width:100%;aspect-ratio:1;object-fit:contain;background:rgba(255,255,255,.9);border-radius:14px;padding:4px}
.lcrit figcaption{font-size:11px;font-weight:700;margin-top:4px;line-height:1.1}
.lcrit small{display:block;font-weight:500;opacity:.8}
.lrooms{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.lrooms img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:14px}
.lrooms figcaption{font-size:13px;font-weight:700;margin-top:4px}
.lsec details{background:rgba(255,255,255,.95);color:var(--ink);border-radius:14px;padding:10px 14px;margin-bottom:8px}
.lsec summary{font-weight:700;cursor:pointer}
.lsec details p{margin:8px 0 2px !important;font-size:14px;line-height:1.4;font-weight:500;opacity:1}
.lfoot{text-align:center;margin-top:20px;font-size:13px}
.lfoot nav{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.lfoot a{color:#fff;font-weight:700}
.lfoot p{opacity:.75;margin:0 !important}