/* IO — retro moderno. Una consola 2D con alma de Game Boy y luces de hoy. */
:root{
  color-scheme:dark;
  --bg:#09090f;--s1:#111120;--s2:#181830;--s3:#1f1f3c;--s4:#2a2a52;
  --acc:#7c5cff;--acc2:#a78bfa;--acc3:#c4b5fd;--cyan:#22d3ee;--green:#4ade80;--amber:#fbbf24;--red:#f87171;--pink:#f472b6;
  --text:#eeecfc;--muted:#9391bd;--dim:#5f5d8f;--border:rgba(124,92,255,.14);--bh:rgba(124,92,255,.34);
  --font:'Space Grotesk',system-ui,sans-serif;--mono:'Space Mono',ui-monospace,monospace;--pixel:'Press Start 2P',ui-monospace,monospace;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;-webkit-tap-highlight-color:transparent;
  background-image:radial-gradient(ellipse 90% 45% at 50% 0%,rgba(124,92,255,.16),transparent 70%)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:var(--text)}
h2,h3{font-weight:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

@keyframes fu{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes blinkA{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.45)}50%{box-shadow:0 0 0 8px rgba(251,191,36,0)}}
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes ioFlip{0%,40%{transform:rotateX(0)}46%,62%{transform:rotateX(180deg)}68%,100%{transform:rotateX(360deg)}}

/* ================= encabezado ================= */
.hdr{position:sticky;top:0;z-index:80;display:flex;align-items:center;justify-content:space-between;padding:calc(.55rem + env(safe-area-inset-top,0px)) 1rem .55rem;background:rgba(9,9,15,.84);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--border);overflow:hidden}
.logo{position:relative;height:30px;perspective:200px}
.logo-flip{position:relative;display:block;width:44px;height:30px;transform-style:preserve-3d;animation:ioFlip 9s ease-in-out infinite}
.lf{position:absolute;inset:0;font-size:27px;font-weight:700;letter-spacing:-1px;line-height:30px;backface-visibility:hidden;background:linear-gradient(135deg,var(--acc2),var(--acc) 50%,var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lf-b{transform:rotateX(180deg);font-family:var(--mono);letter-spacing:-2px}
@supports (-webkit-box-reflect:below){.logo-flip{-webkit-box-reflect:below -7px linear-gradient(transparent 50%,rgba(0,0,0,.32))}.io-big .logo-flip{-webkit-box-reflect:below -22px linear-gradient(transparent 45%,rgba(0,0,0,.35))}}
.hdr-r{display:flex;align-items:center;gap:8px}
.hdr-lvl{font-family:var(--pixel);font-size:8.5px;color:var(--acc3);background:var(--s1);border:1px solid var(--border);border-radius:20px;padding:7px 10px}
.icon-btn{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;background:var(--s1);border:1px solid var(--border)}
.demo-bar{max-width:540px;margin:.6rem auto 0;width:calc(100% - 1.8rem);display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;padding:.55rem .9rem;border-radius:14px;background:rgba(124,92,255,.12);border:1px solid var(--bh);color:var(--acc3)}
.demo-bar button{font-weight:700;color:var(--text);font-size:12.5px}
.main{max-width:540px;margin:0 auto;padding:.8rem .8rem calc(2rem + var(--safe-b));display:flex;flex-direction:column;gap:14px}

/* ================= consola ================= */
.console{position:relative;border-radius:30px 30px 0 0;background:linear-gradient(180deg,#2c2166 0,#1d1650 360px,#170f40 700px,#120c33 1000px,rgba(18,12,51,.55) calc(100% - 160px),rgba(9,9,15,0) 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 -6px 40px rgba(124,92,255,.12);padding:14px 14px 40px;margin:0 -.8rem}
.console::before{content:'';position:absolute;inset:0 0 auto;height:520px;border-radius:30px 30px 0 0;pointer-events:none;background:radial-gradient(ellipse 70% 40% at 20% 0%,rgba(255,255,255,.07),transparent 70%)}
.bezel{background:#0b0a18;border-radius:18px 18px 30px 18px;padding:9px 9px 7px;box-shadow:inset 0 2px 8px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.08)}
.screen{position:relative;height:384px;border-radius:10px;overflow:hidden;background:#0e0c24;box-shadow:inset 0 0 0 2px rgba(0,0,0,.6);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.screen::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:40;background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.bezel-label{display:flex;align-items:center;gap:7px;padding:8px 4px 0;font-family:var(--pixel);font-size:7.5px;letter-spacing:1px;color:#8f86c9}
.bezel-label em{font-style:normal;color:var(--acc2)}
.bezel-label small{margin-left:auto;font-family:var(--font);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#5f578f;font-style:italic}
.led{width:7px;height:7px;border-radius:50%;background:#3f3a6b}
.led.on{background:var(--red);box-shadow:0 0 8px var(--red);animation:twinkle 1s infinite}

/* ---------- escena ---------- */
.scene{position:absolute;inset:0;--floorY:17%;--wallTop:66px;--wallK:.40;--ceilY:58px;--wall:#3b2330;--wall2:#4a2a36;--trim:#6b4226;--floorA:#5b3a24;--floorB:#4a2f1d}
.wall{position:absolute;inset:0 0 18% 0;background:linear-gradient(180deg,var(--wall),var(--wall2));filter:hue-rotate(var(--hue,0deg))}
.wall-trim{position:absolute;left:0;right:0;bottom:18%;height:8px;background:var(--trim);box-shadow:0 -1px 0 rgba(255,255,255,.08)}
.floor{position:absolute;left:0;right:0;bottom:0;height:18%;background:repeating-linear-gradient(90deg,var(--floorA) 0 38px,var(--floorB) 38px 40px)}
.floor::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 40%)}
.rug{position:absolute;left:55%;bottom:8%;width:46%;height:5%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(124,92,255,.32),transparent 70%)}
/* skins por edificio */
[data-skin="barrio"]{--wall:#3b2330;--wall2:#4a2a36;--trim:#6b4226;--floorA:#6b4428;--floorB:#553520}
[data-skin="barrio"] .wall{background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 2px,transparent 2px 22px),repeating-linear-gradient(90deg,rgba(0,0,0,.09) 0 2px,transparent 2px 44px),linear-gradient(180deg,var(--wall),var(--wall2))}
[data-skin="torre"]{--wall:#1f2a44;--wall2:#27365c;--trim:#94a3b8;--floorA:#8b7355;--floorB:#6f5a42}
[data-skin="torre"] .floor{background:repeating-linear-gradient(135deg,var(--floorA) 0 14px,var(--floorB) 14px 28px)}
[data-skin="rasca"]{--wall:#0f172a;--wall2:#1e1b4b;--trim:#d4a24c;--floorA:#1f2937;--floorB:#111827}
[data-skin="rasca"] .wall{background:repeating-linear-gradient(90deg,transparent 0 58px,rgba(212,162,76,.22) 58px 60px),linear-gradient(180deg,var(--wall),var(--wall2))}
[data-skin="rasca"] .floor{background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 40%),repeating-linear-gradient(90deg,#1f2937 0 60px,#111827 60px 62px)}
[data-skin="nubes"]{--wall:#e0e7ff;--wall2:#c7d2fe;--trim:#a5b4fc;--floorA:#f8fafc;--floorB:#e2e8f0}
[data-skin="nubes"] .floor{background:linear-gradient(135deg,#f8fafc 0 25%,#e2e8f0 25% 50%,#f8fafc 50% 75%,#e2e8f0 75%) 0 0/34px 34px}
[data-skin="orbital"]{--wall:#0b1020;--wall2:#111a33;--trim:#22d3ee;--floorA:#1e293b;--floorB:#0f172a}
[data-skin="orbital"] .wall{background:repeating-linear-gradient(90deg,transparent 0 70px,rgba(34,211,238,.22) 70px 71px),repeating-linear-gradient(0deg,transparent 0 70px,rgba(34,211,238,.12) 70px 71px),linear-gradient(180deg,var(--wall),var(--wall2))}
[data-skin="orbital"] .wall-trim{box-shadow:0 0 12px var(--cyan)}
[data-skin="orbital"] .floor{background:repeating-linear-gradient(90deg,#1e293b 0 22px,#0f172a 22px 24px),#0f172a}
/* tipo de piso */
[data-type="jardin"] .floor{background:repeating-linear-gradient(90deg,#15803d 0 6px,#166534 6px 12px)}
[data-type="jardin"] .wall{box-shadow:inset 0 -60px 60px -30px rgba(74,222,128,.25)}
[data-type="piscina"] .floor{background:linear-gradient(180deg,#e2e8f0 0 22%,#22d3ee 22% 100%)}
[data-type="piscina"] .floor::before{content:'';position:absolute;left:0;right:0;top:30%;height:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 18px,transparent 18px 36px);animation:twinkle 2s infinite}
[data-type^="garaje"] .floor,[data-type="hangar"] .floor{background:repeating-linear-gradient(90deg,#fbbf24 0 18px,#111 18px 30px) top/100% 5px no-repeat,linear-gradient(180deg,#4b5563,#374151)}
[data-type^="garaje"] .wall,[data-type="hangar"] .wall{background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 2px,transparent 2px 24px),linear-gradient(180deg,#374151,#2b3441)}
[data-type="gimnasio"] .floor{background:repeating-linear-gradient(90deg,#1f2937 0 30px,#111827 30px 60px)}
[data-type="cocina"] .wall::after{content:'';position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(0deg,rgba(255,255,255,.12) 1px,transparent 1px) 0 0/16px 16px}
.scene.open .wall{background:none}
.scene.open .wall-trim{background:repeating-linear-gradient(90deg,#94a3b8 0 3px,transparent 3px 20px);height:26px;bottom:18%}
[data-type="helipuerto"] .floor{background:radial-gradient(ellipse 30% 90% at 55% 60%,transparent 60%,#fbbf24 61% 66%,transparent 67%),#374151}
/* ventana: la vista depende de la altura */
.win{position:absolute;top:70px;right:52px;width:92px;height:72px;border-radius:5px;overflow:hidden;border:3px solid var(--trim);z-index:1;background:linear-gradient(180deg,#38bdf8,#a5f3fc)}
.win::before,.win::after{content:'';position:absolute;background:var(--trim);z-index:5;opacity:.85}
.win::before{top:50%;left:0;right:0;height:2px}.win::after{left:50%;top:0;bottom:0;width:2px}
[data-skin="torre"] .win{width:118px;height:80px}
[data-skin="rasca"] .win{width:150px;height:98px;top:62px;right:50px}
[data-skin="nubes"] .win{width:160px;height:100px;border-radius:80px 80px 6px 6px}
[data-skin="orbital"] .win{width:96px;height:96px;border-radius:50%;border-width:5px;top:60px;box-shadow:0 0 16px rgba(34,211,238,.5)}
[data-skin="orbital"] .win::before,[data-skin="orbital"] .win::after{display:none}
.scene.open .win{inset:0;width:auto;height:auto;border:none;border-radius:0}
.scene.open .win::before,.scene.open .win::after{display:none}
[data-time="tarde"] .win{background:linear-gradient(180deg,#7c3aed,#f97316 65%,#fbbf24)}
[data-time="noche"] .win{background:linear-gradient(180deg,#070b24,#1b1650)}
[data-view="espacio"] .win{background:radial-gradient(circle at 70% 70%,#1d4ed8 0 18%,#22c55e 19% 22%,transparent 23%),#02030a!important}
.sun{position:absolute;top:8px;left:10px;width:14px;height:14px;border-radius:50%;background:#fde68a;box-shadow:0 0 14px #fde68a;z-index:1}
[data-time="noche"] .sun{background:#e0e7ff;box-shadow:0 0 10px #c7d2fe;width:10px;height:10px}
[data-view="espacio"] .sun{display:none}
.stars{position:absolute;inset:0;display:none;background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 60% 20%,#fff,transparent),radial-gradient(1px 1px at 80% 65%,#fff,transparent),radial-gradient(1px 1px at 35% 75%,#fff,transparent),radial-gradient(1px 1px at 90% 15%,#fff,transparent);animation:twinkle 3s infinite}
[data-time="noche"] .stars,[data-view="espacio"] .stars{display:block}
.v{position:absolute;left:0;right:0;bottom:0;z-index:2}
[data-view="calle"] .v1{height:48%;background:radial-gradient(circle at 18% 30%,#16a34a 0 24%,transparent 25%),radial-gradient(circle at 78% 42%,#15803d 0 28%,transparent 29%),linear-gradient(0deg,#4b5563 0 26%,transparent 26%)}
[data-view="barrio"] .v1{height:55%;background:linear-gradient(90deg,#7c2d12 0 22%,transparent 22% 30%,#9a3412 30% 58%,transparent 58% 66%,#78350f 66% 100%);clip-path:polygon(0 30%,11% 0,22% 30%,22% 100%,30% 100%,30% 35%,44% 5%,58% 35%,58% 100%,66% 100%,66% 25%,83% 0,100% 25%,100% 100%,0 100%)}
[data-view="ciudad"] .v1{height:80%;background:linear-gradient(90deg,#1e1b4b 0 14%,transparent 14% 18%,#312e81 18% 34%,transparent 34% 38%,#1e1b4b 38% 56%,transparent 56% 60%,#3730a3 60% 76%,transparent 76% 80%,#1e1b4b 80% 100%);clip-path:polygon(0 30%,14% 30%,14% 8%,34% 8%,34% 40%,56% 40%,56% 0,76% 0,76% 25%,100% 25%,100% 100%,0 100%)}
[data-view="ciudad"] .v2{height:80%;background:repeating-linear-gradient(0deg,transparent 0 6px,rgba(253,224,71,.35) 6px 8px);clip-path:inherit;mix-blend-mode:screen;opacity:.5}
[data-view="skyline"] .v1{height:34%;background:linear-gradient(90deg,#1e1b4b 0 20%,transparent 20% 26%,#312e81 26% 52%,transparent 52% 58%,#1e1b4b 58% 100%);clip-path:polygon(0 40%,20% 40%,20% 0,52% 0,52% 30%,100% 30%,100% 100%,0 100%);opacity:.9}
[data-view="nubes"] .v1,[data-view="nubes"] .v2{height:100%;background:radial-gradient(ellipse 45% 18% at 30% 72%,rgba(255,255,255,.85),transparent 70%),radial-gradient(ellipse 50% 16% at 78% 58%,rgba(255,255,255,.7),transparent 70%)}
[data-view="nubes"] .v2{animation:clouds 18s linear infinite}
@keyframes clouds{from{transform:translateX(-30%)}to{transform:translateX(30%)}}
.scene.open .v1{opacity:.8}
/* ascensor */
.elev{position:absolute;left:8px;bottom:18%;width:62px;height:132px;z-index:2;cursor:pointer}
.elev-ind{position:absolute;top:0;left:50%;transform:translateX(-50%);min-width:30px;height:16px;border-radius:3px;background:#0b0a18;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-family:var(--pixel);font-size:7px;color:var(--amber);text-shadow:0 0 6px rgba(251,191,36,.7)}
.elev-frame{position:absolute;left:0;right:0;bottom:0;top:20px;padding:5px 5px 0;border-radius:4px 4px 0 0;background:var(--ef,#6b4226);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.elev-doors{position:relative;width:100%;height:100%;overflow:hidden;background:#05040c;display:flex}
.elev-doors i{flex:1;background:var(--ed,linear-gradient(90deg,#8b5a2b,#a16a36));transition:transform .45s cubic-bezier(.6,0,.3,1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.elev-doors i:first-child{border-right:1px solid rgba(0,0,0,.4)}
.scene.doors-open .elev-doors i:first-child{transform:translateX(-100%)}
.scene.doors-open .elev-doors i:last-child{transform:translateX(100%)}
[data-elev="madera"]{--ef:#5b3a24;--ed:linear-gradient(90deg,#8b5a2b,#a16a36)}
[data-elev="acero"]{--ef:#64748b;--ed:linear-gradient(90deg,#94a3b8,#cbd5e1 50%,#94a3b8)}
[data-elev="cristal"]{--ef:#d4a24c;--ed:linear-gradient(90deg,rgba(56,189,248,.35),rgba(191,219,254,.6) 50%,rgba(56,189,248,.35))}
[data-elev="oro"]{--ef:#b45309;--ed:linear-gradient(90deg,#d4a24c,#fde68a 50%,#d4a24c)}
[data-elev="neon"]{--ef:#0f172a;--ed:linear-gradient(90deg,#0b1020,#1e293b 50%,#0b1020)}
[data-elev="neon"] .elev-frame{box-shadow:0 0 12px rgba(34,211,238,.7),inset 0 0 0 1px var(--cyan)}
.door-hint{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-family:var(--pixel);font-size:9px;color:#fff;background:var(--acc);padding:3px 5px;border-radius:3px;animation:hintB .8s infinite}
@keyframes hintB{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-4px)}}
/* objetos */
.objs{position:absolute;inset:0;z-index:3}
.obj{position:absolute;transform:translateX(-50%);font-size:calc(32px * var(--s,1));line-height:1;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35));padding:2px;border-radius:6px;touch-action:none}
.obj .spr{display:inline-block;transition:transform .2s}
.obj.b-ceiling::before{content:'';position:absolute;left:50%;bottom:92%;width:1px;height:30px;background:rgba(255,255,255,.35)}
.obj.b-ceiling .spr{animation:swing 4s ease-in-out infinite;transform-origin:top center}
@keyframes swing{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.obj.veh{z-index:1}.obj.veh .spr{transform:scaleX(-1)}
.obj.pet .spr{animation:petWalk 7s ease-in-out infinite}
@keyframes petWalk{0%,100%{transform:translateX(0)}25%{transform:translateX(-26px)}30%{transform:translateX(-26px) translateY(-6px)}55%{transform:translateX(14px)}80%{transform:translateX(24px) scaleX(-1)}}
.obj.near::after{content:'A';position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-family:var(--pixel);font-size:8px;color:#0b0a18;background:#f9a8d4;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;animation:hintB .8s infinite;filter:none}
.obj.drive .spr{animation:drive 2.2s ease-in-out}
@keyframes drive{0%{transform:scaleX(-1) translateX(0)}40%{transform:scaleX(-1) translateX(-320px)}41%{transform:scaleX(-1) translateX(320px)}100%{transform:scaleX(-1) translateX(0)}}
.screen.deco .obj{outline:1px dashed rgba(255,255,255,.28)}
.screen.deco .obj.sel{outline:2px solid var(--amber);animation:selB 1s infinite;z-index:7}
@keyframes selB{50%{outline-color:rgba(251,191,36,.25)}}
.screen.deco .obj.moving{filter:drop-shadow(0 10px 6px rgba(0,0,0,.5));transform:translateX(-50%) translateY(-8px) scale(1.08)}
.screen.deco .hero{opacity:.35}
/* héroe */
.hero{position:absolute;bottom:calc(var(--floorY) - 12px);width:76px;height:127px;transform:translateX(-50%);z-index:6;transition:opacity .35s}
.hero.inside{opacity:0}
.hero-in{width:100%;height:100%;transition:transform .15s}
.hero.flip .hero-in{transform:scaleX(-1)}
.hero .av{width:100%;height:100%;overflow:visible;transform-origin:bottom center;animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.012)}}
.av .leg,.av .arm{transform-box:fill-box;transform-origin:50% 3%}
.hero.walking .leg-l{animation:legA .52s linear infinite}.hero.walking .leg-r{animation:legB .52s linear infinite}
.hero.walking .arm-l{animation:legB .52s linear infinite}.hero.walking .arm-r{animation:legA .52s linear infinite}
.hero.walking .av-body{animation:bob .26s ease-in-out infinite alternate}
@keyframes legA{0%,100%{transform:rotate(18deg)}50%{transform:rotate(-18deg)}}
@keyframes legB{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-2.5px)}}
.hero.act-jump .av{animation:actJump 1.1s cubic-bezier(.22,1,.36,1)}
.hero.act-dance .av{animation:actDance 1.3s ease-in-out}
.hero.act-flex .av{animation:actFlex 1.2s ease-in-out}
.hero.act-wave .av{animation:actWave 1.1s ease-in-out}
.hero.act-sit .av{animation:actSit 1.3s ease-in-out}
.hero.act-float .av{animation:actFloat 2.4s ease-in-out}
.hero.act-sleep .av{animation:actSleep 2.4s ease-in-out}
.hero.act-flex .arm,.hero.act-dance .arm{animation:armUp .6s ease-in-out 2}
@keyframes armUp{50%{transform:rotate(-150deg)}}
@keyframes actJump{0%{transform:none}15%{transform:scale(1.08,.9)}45%{transform:translateY(-60px) rotate(180deg)}75%{transform:translateY(0) rotate(360deg)}85%{transform:scale(1.06,.94)}100%{transform:none}}
@keyframes actDance{0%,100%{transform:none}15%{transform:rotate(-10deg) translateY(-8px)}30%{transform:rotate(10deg)}45%{transform:rotate(-10deg) translateY(-8px)}60%{transform:rotate(10deg)}75%{transform:scaleX(-1) translateY(-12px)}}
@keyframes actFlex{0%,100%{transform:none}25%{transform:scale(1.1,.9)}50%{transform:scale(1.06) translateY(-6px)}}
@keyframes actWave{0%,100%{transform:none}25%,75%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes actSit{0%,100%{transform:none}30%,70%{transform:scale(1.04,.8)}}
@keyframes actFloat{0%,100%{transform:none}30%,70%{transform:translateY(-22px)}}
@keyframes actSleep{0%,100%{transform:none}20%,80%{transform:rotate(-80deg) translate(-30px,20px)}}
.prop{position:absolute;top:36px;right:-16px;font-size:26px;opacity:0;z-index:8;pointer-events:none}
.prop.show{animation:propUp 1.6s ease-out}
@keyframes propUp{0%{opacity:0;transform:translateY(10px) scale(.5)}20%{opacity:1;transform:translateY(-8px) scale(1.2)}70%{opacity:1;transform:translateY(-14px)}100%{opacity:0;transform:translateY(-34px)}}
/* ánimo (ojos y boca) y accesorios */
.eyes,.mouth,.acc{display:none}
[data-mood="neutral"] .ey-neutral,[data-mood="neutral"] .mo-neutral,[data-mood="happy"] .ey-happy,[data-mood="happy"] .mo-happy,[data-mood="worried"] .ey-worried,[data-mood="worried"] .mo-worried,[data-mood="excited"] .ey-excited,[data-mood="excited"] .mo-excited,[data-mood="tired"] .ey-tired,[data-mood="tired"] .mo-tired{display:block}
.blink{transform-box:fill-box;transform-origin:50% 50%;animation:blink 5s infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.wear-lentes .acc-lentes,.wear-gafas .acc-gafas,.wear-gorra .acc-gorra,.wear-gorro .acc-gorro,.wear-lazo .acc-lazo,.wear-audifonos .acc-audifonos,.wear-casco .acc-casco,.wear-sombrero .acc-sombrero,.wear-corona .acc-corona{display:block}
/* efectos */
.fx{position:absolute;inset:0;pointer-events:none;z-index:20;overflow:hidden}
.cf{position:absolute;top:52%;width:7px;height:10px;border-radius:1px;font:700 12px var(--mono);display:flex;align-items:center;justify-content:center;animation:cf 1.4s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes cf{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 230px)) rotate(var(--r));opacity:0}}
.ftxt{position:absolute;top:30%;transform:translateX(-50%);font-family:var(--pixel);font-size:11px;color:#67e8f9;text-shadow:2px 2px 0 #000;white-space:nowrap;animation:ftxt 1.7s ease-out forwards}
.ftxt.xp{color:#86efac;top:22%}
@keyframes ftxt{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}20%{opacity:1;transform:translate(-50%,-6px) scale(1.15)}80%{opacity:1;transform:translate(-50%,-30px)}100%{opacity:0;transform:translate(-50%,-46px)}}
.bit-fly{position:fixed;z-index:950;font:700 16px var(--mono);color:var(--cyan);text-shadow:0 0 8px var(--cyan);pointer-events:none;transition:transform .9s cubic-bezier(.5,-.3,.6,1),opacity .9s ease-in}
.crown-drop{position:absolute;left:50%;top:40%;z-index:25;font-size:64px;transform:translate(-50%,-50%);filter:drop-shadow(0 0 20px rgba(251,191,36,.8));pointer-events:none}
.crown-drop.go{animation:crownGo 1.9s cubic-bezier(.22,1,.36,1) forwards}
@keyframes crownGo{0%{transform:translate(-50%,-160%) scale(.3) rotate(-20deg);opacity:0}25%{transform:translate(-50%,-50%) scale(1.2) rotate(8deg);opacity:1}45%{transform:translate(-50%,-50%) scale(1) rotate(0)}75%{transform:translate(-50%,-30%) scale(.8);opacity:1}100%{transform:translate(-50%,40%) scale(.2);opacity:0}}
/* HUD y paneles de la pantalla */
.hud{position:absolute;top:8px;left:8px;right:8px;z-index:12;display:flex;align-items:center;gap:6px;font-family:var(--pixel);font-size:8.5px;color:#fff;text-shadow:1px 1px 0 #000;pointer-events:none}
.hud>*{background:rgba(0,0,0,.5);padding:4px 6px;border-radius:4px}
.hud-lv b{font-size:11px;color:var(--amber);margin-left:3px}
.hud-xp{flex:1;height:10px;padding:0;border:1.5px solid rgba(255,255,255,.65);border-radius:2px;overflow:hidden}
.hud-xp-fill{height:100%;background:repeating-linear-gradient(90deg,var(--green) 0 6px,#22c55e 6px 8px);transition:width .9s cubic-bezier(.22,1,.36,1)}
.hud-bits i{font-style:normal;color:var(--cyan);margin-right:3px}.hud-bits b{color:#a5f3fc}
.hud-bits.bump{animation:pop .45s}
.hud-streak{color:#fdba74}
.floor-tag{position:absolute;top:32px;left:8px;z-index:12;font-family:var(--pixel);font-size:7px;color:#fff;background:rgba(0,0,0,.5);padding:4px 6px;border-radius:3px;letter-spacing:.5px;text-shadow:1px 1px 0 #000;max-width:62%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.minimap{position:absolute;top:32px;right:8px;z-index:12;width:34px;display:flex;flex-direction:column;align-items:center;gap:3px;background:rgba(0,0,0,.55);border-radius:5px;padding:4px 4px 3px;border:1px solid rgba(255,255,255,.12)}
.minimap b{font-family:var(--pixel);font-size:5.5px;color:var(--acc3)}
.minimap span{font-family:var(--pixel);font-size:7px;color:var(--amber)}
.mm-tower{display:grid;grid-template-rows:repeat(var(--rows),1fr);gap:1px;width:20px;height:60px;padding:0 2px;background:#2a2550;border-radius:2px 2px 0 0}
.mm-tower i{background:#18152f;border-radius:1px}
.mm-tower i.open{background:#6d5bd0}
.mm-tower i.here{background:var(--amber);animation:blinkA .9s infinite}
.minimap[data-skin="rasca"] .mm-tower{background:#3b2f15}.minimap[data-skin="orbital"] .mm-tower{background:#0e3a44}.minimap[data-skin="nubes"] .mm-tower{background:#4b5188}
.dlg{position:absolute;left:8px;right:8px;bottom:8px;z-index:14;display:flex;align-items:flex-start;gap:8px;min-height:46px;background:rgba(8,7,22,.94);border:2px solid #c4b5fd;border-radius:6px;box-shadow:0 0 0 2px #0b0a18,3px 3px 0 2px rgba(0,0,0,.4);padding:8px 24px 8px 8px;font-size:12.5px;line-height:1.4;color:#f5f3ff;animation:fu .2s both}
.dlg-name{flex-shrink:0;font-family:var(--pixel);font-size:7.5px;color:#0b0a18;background:#c4b5fd;padding:3px 5px;border-radius:2px;margin-top:1px;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlg-next{position:absolute;right:8px;bottom:5px;font-size:9px;color:#c4b5fd;animation:blinkA 1s infinite}
.deco-bar{position:absolute;left:8px;right:48px;top:52px;z-index:14;display:flex;flex-direction:column;gap:3px;background:repeating-linear-gradient(135deg,#fbbf24 0 10px,#111 10px 20px);padding:3px;border-radius:5px}
.deco-bar b,.deco-bar span{background:#111;color:#fde68a;font-family:var(--pixel);font-size:7px;padding:5px 6px;border-radius:3px;line-height:1.5}
.deco-bar span{color:#fff;font-size:6.5px}
/* menú START */
.gb-menu{position:absolute;inset:0;z-index:30;background:rgba(5,4,14,.35)}
.gbm-box{position:absolute;top:30px;right:10px;width:62%;max-width:230px;background:#f8f5e8;color:#171320;border:3px solid #171320;border-radius:6px;box-shadow:4px 4px 0 rgba(0,0,0,.5);padding:8px 6px;font-family:var(--pixel);animation:pop .18s both}
.gbm-h{font-size:7.5px;display:flex;justify-content:space-between;gap:6px;padding:2px 6px 8px;border-bottom:2px dashed #171320;margin-bottom:5px}
.gbm-h span{color:#5b21b6}
.gbm-i{display:block;width:100%;text-align:left;font-size:8.5px;padding:8px 6px 8px 18px;position:relative;border-radius:3px;color:#171320}
.gbm-i.sel{background:#e9e3ff}
.gbm-i.sel::before{content:'▶';position:absolute;left:5px;animation:blinkA .9s infinite}
.gbm-f{font-size:6px;color:#6b6b80;padding:8px 6px 2px;border-top:2px dashed #171320;margin-top:5px}
/* panel del ascensor */
.elev-panel{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;gap:8px;padding:34px 16px 12px;background:linear-gradient(180deg,#2b3140,#1b1f2a);border:0;animation:fu .2s both}
.ep-top{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:center}
.ep-top small{display:block;font-family:var(--pixel);font-size:6.5px;color:#94a3b8}
.ep-top b{font-family:var(--pixel);font-size:9px;color:var(--amber);line-height:1.6}
.ep-w{width:32px;height:32px;border-radius:8px;background:#0f1320;color:#cbd5e1;font-size:12px;border:1px solid #475569}
.ep-w:disabled{opacity:.3}
.ep-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;padding:10px;background:#11151f;border-radius:10px;border:1px solid #475569;box-shadow:inset 0 2px 6px rgba(0,0,0,.6);overflow-y:auto;flex:1;align-content:start}
.eb{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#cbd5e1,#64748b);color:#0b0a18;font-family:var(--pixel);font-size:8px;box-shadow:0 2px 0 #0b0a18,inset 0 -2px 0 rgba(0,0,0,.25)}
.ep-grid[data-skin="rasca"] .eb{background:radial-gradient(circle at 35% 30%,#fde68a,#b45309)}
.ep-grid[data-skin="orbital"] .eb{background:radial-gradient(circle at 35% 30%,#a5f3fc,#0e7490)}
.eb.cur{box-shadow:0 0 0 2px var(--amber),0 0 12px rgba(251,191,36,.6)}
.eb.sel{outline:3px solid #fff;outline-offset:2px;animation:selB .8s infinite}
.eb.locked{background:#1f2433;color:#475569;font-size:9px;box-shadow:none}
.ep-info{font-family:var(--pixel);font-size:7.5px;color:#e2e8f0;text-align:center;line-height:1.6;min-height:24px}
.ep-help{font-family:var(--pixel);font-size:6px;color:#94a3b8;text-align:center}
.elev-ride{position:absolute;inset:0;z-index:31;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:linear-gradient(90deg,var(--ef,#3f3f46),#71717a 50%,var(--ef,#3f3f46))}
.elev-ride[data-elev="madera"]{--ef:#5b3a24}.elev-ride[data-elev="cristal"]{--ef:#1e3a8a}.elev-ride[data-elev="oro"]{--ef:#92400e}.elev-ride[data-elev="neon"]{--ef:#0b1020}
.ride-ind{display:flex;align-items:center;gap:10px;background:#050409;border:2px solid #475569;padding:10px 16px;border-radius:6px;font-family:var(--pixel);color:var(--amber);text-shadow:0 0 10px rgba(251,191,36,.8)}
.ride-ind span{font-size:14px;animation:blinkA .5s infinite}
.ride-ind b{font-size:28px;min-width:64px;text-align:center}
.ride-doors{width:120px;height:170px;display:flex;border:4px solid #334155;border-radius:4px 4px 0 0}
.ride-doors i{flex:1;background:linear-gradient(90deg,#94a3b8,#e2e8f0 50%,#94a3b8)}
.ride-doors i:first-child{border-right:2px solid #1f2937}
.lvlup{position:absolute;inset:0;z-index:35;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(124,92,255,.6),rgba(8,7,22,.92) 72%);animation:fu .3s both;padding:18px;text-align:center}
.lu-in{display:flex;flex-direction:column;align-items:center;gap:10px}
.lu-in b{font-family:var(--pixel);font-size:22px;color:#fde68a;text-shadow:3px 3px 0 #7c2d12;animation:pop .6s both}
.lu-in span{font-family:var(--pixel);font-size:8.5px;color:#fff;line-height:1.8}
.lu-in .lu-world{color:var(--cyan);font-size:10px}
.lu-in small{font-size:12px;color:var(--acc3)}
.lu-go{font-family:var(--pixel);font-size:7px!important;color:var(--amber)!important;animation:blinkA 1s infinite}
/* controles */
.controls{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:16px 6px 4px}
.dpad{display:grid;grid-template-columns:repeat(3,38px);grid-template-rows:repeat(3,38px);filter:drop-shadow(0 4px 0 rgba(0,0,0,.45))}
.dpad button,.dp-mid{background:#0f0d24;color:#6d65a8;font-size:12px;display:flex;align-items:center;justify-content:center;touch-action:none}
.dpad button.down{background:#2a2360;color:#fff;transform:translateY(1px)}
.dp-up{grid-column:2;grid-row:1;border-radius:7px 7px 0 0}.dp-left{grid-column:1;grid-row:2;border-radius:7px 0 0 7px}.dp-mid{grid-column:2;grid-row:2}.dp-right{grid-column:3;grid-row:2;border-radius:0 7px 7px 0}.dp-down{grid-column:2;grid-row:3;border-radius:0 0 7px 7px}
.mid-btns{display:flex;justify-content:center;gap:12px;align-self:end;padding-bottom:4px}
.mid-btns button{display:flex;flex-direction:column;align-items:center;gap:5px;font-family:var(--pixel);font-size:6.5px;color:#8f86c9;letter-spacing:.5px;touch-action:none}
.mid-btns button i{width:34px;height:10px;border-radius:6px;background:#0f0d24;box-shadow:0 2px 0 rgba(0,0,0,.5);transform:rotate(-18deg)}
.mid-btns button.down i{background:#2a2360;transform:rotate(-18deg) translateY(1px)}
.ab{display:flex;align-items:center;gap:10px;transform:rotate(-20deg);padding:6px 4px}
.ab button{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.25);touch-action:none;transition:transform .06s}
.ab button span{transform:rotate(20deg);font-family:var(--pixel);font-size:11px;color:rgba(255,255,255,.92)}
.ab button.down{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.45)}
.btn-a{background:radial-gradient(circle at 35% 30%,#f9a8d4,#db2777)}
.btn-b{background:radial-gradient(circle at 35% 30%,#c4b5fd,#7c3aed);margin-top:28px}
.ctl-help{text-align:center;font-size:10.5px;color:#7c74b8;padding:8px 0 2px}
.ctl-help b{color:var(--acc3)}

/* ================= tarjetas ================= */
.card{background:var(--s1);border:1px solid var(--border);border-radius:22px;padding:1.1rem 1.1rem 1.15rem;animation:fu .5s ease both}
.h-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.h-head h2{font-size:17px;font-weight:700;letter-spacing:-.3px}
.h-prog{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.day-bar{height:8px;border-radius:3px;background:var(--s3);overflow:hidden;margin-bottom:12px}
.day-bar i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--green) 0 8px,#22c55e 8px 10px);transition:width .8s}
.h-next{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:linear-gradient(135deg,rgba(124,92,255,.22),rgba(34,211,238,.1));border:1px solid var(--bh);margin-bottom:10px}
.hn-ic{font-size:26px}
.h-next b{display:block;font-size:14px}
.h-next small{font-size:11.5px;color:var(--acc3)}
.h-next div{flex:1;min-width:0}
.hn-go{width:44px;height:44px;border-radius:50%;background:var(--green);color:#052e16;font-size:16px;flex-shrink:0;box-shadow:0 0 0 0 rgba(74,222,128,.5);animation:pulseG 1.8s infinite}
@keyframes pulseG{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.45)}50%{box-shadow:0 0 0 9px rgba(74,222,128,0)}}
.h-list{display:flex;flex-direction:column;gap:7px}
.hab{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:11px;padding:8px 10px 8px 8px;border-radius:16px;background:var(--s2);border:1px solid var(--border);transition:border-color .2s}
.hab-ic{position:relative;width:48px;height:48px}
.hab-ic .hring{position:absolute;inset:0;width:100%;height:100%}
.hab-ic span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:21px}
.hab-inf{text-align:left;min-width:0}
.hab-inf b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hab-inf small{font-size:11px;color:var(--muted)}
.hab.late .hab-inf small{color:var(--amber)}
.hb-btn{font-size:12px;font-weight:700;padding:9px 12px;border-radius:12px;background:var(--s3);border:1px solid var(--bh);color:var(--acc3);white-space:nowrap;font-family:var(--mono)}
.hb-btn.go{background:var(--acc);border-color:var(--acc);color:#fff;font-family:var(--font)}
.hb-btn.run{color:var(--red);border-color:rgba(248,113,113,.5)}
.hb-btn.crown{background:linear-gradient(135deg,#fde68a,#f59e0b);color:#1c1204;border:none;font-family:var(--font);animation:pulse 1.6s infinite}
.hab.st-crown{border-color:rgba(251,191,36,.55);box-shadow:0 0 18px rgba(251,191,36,.14)}
.hab.st-claimed{opacity:.62}
.hab.st-claimed .hab-inf b{text-decoration:line-through;text-decoration-color:rgba(74,222,128,.7)}
.hb-ok{font-family:var(--pixel);font-size:8px;color:var(--green)}
.h-rest{font-size:11.5px;color:var(--dim);padding:6px 4px 0}
.h-rest button{color:var(--acc2);font-size:11.5px;text-decoration:underline}
.chest{margin-top:10px;width:100%;display:flex;align-items:center;justify-content:center;padding:12px;border-radius:12px;font-weight:700;font-size:13px;background:rgba(0,0,0,.25);border:1px dashed rgba(251,191,36,.4);color:#fcd34d;text-align:center}
.chest.ready{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#1c1204;border:none;animation:pulse 1.6s infinite}
.chest.opened{color:var(--muted);border-color:var(--border)}
.btn-add{margin-top:10px;width:100%;padding:12px;border-radius:14px;border:1px dashed var(--bh);color:var(--acc2);font-weight:600;font-size:13.5px}
.empty{color:var(--dim);font-size:13px;text-align:center;padding:1rem .5rem;line-height:1.5}
.week{display:flex;flex-direction:column;gap:5px}
.wk-row{display:grid;grid-template-columns:1fr repeat(7,22px);gap:5px;align-items:center}
.wk-row span{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.wk-row i{height:22px;border-radius:5px;background:var(--s3)}
.wk-h i{background:none;height:auto;font-style:normal;font-family:var(--pixel);font-size:7px;color:var(--dim);text-align:center}
.c-ok{background:linear-gradient(135deg,var(--green),#22c55e)!important;box-shadow:0 0 8px rgba(74,222,128,.3)}
.c-miss{background:rgba(248,113,113,.18)!important}
.c-off{background:transparent!important;border:1px dashed var(--s3)}
.c-hoy{background:var(--s3)!important;outline:1.5px solid var(--acc2)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.stats div{background:var(--s2);border-radius:12px;padding:10px;text-align:center}
.stats b{display:block;font-family:var(--mono);font-size:18px}
.stats span{font-size:10.5px;color:var(--muted)}
.foot{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--dim);padding:4px 0 8px;text-align:center}
.foot .bin{font-family:var(--mono);letter-spacing:1px;color:#3f3d6b}

/* ================= sheet ================= */
.sheet-ov{position:fixed;inset:0;background:rgba(9,9,15,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:300;opacity:0;pointer-events:none;transition:opacity .25s}
.sheet-ov.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;bottom:0;left:0;right:0;max-width:520px;margin:0 auto;background:var(--s1);border-radius:24px 24px 0 0;border-top:1px solid var(--bh);z-index:301;transform:translateY(105%);visibility:hidden;transition:transform .34s cubic-bezier(.22,1,.36,1),visibility 0s .34s;max-height:88vh;display:flex;flex-direction:column;padding-bottom:var(--safe-b)}
.sheet.open{transform:none;visibility:visible;transition:transform .34s cubic-bezier(.22,1,.36,1)}
.sheet-drag{width:38px;height:4px;background:var(--s4);border-radius:4px;margin:10px auto 0}
.sheet-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 18px 6px}
.sheet-title{font-family:var(--pixel);font-size:11px;letter-spacing:.5px;color:var(--acc3)}
.sheet-close{color:var(--muted);font-size:18px;padding:4px 9px;border-radius:9px}
.sheet-body{overflow-y:auto;padding:6px 18px 26px;flex:1;overscroll-behavior:contain}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field label{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1.2px;font-weight:700}
.inp{background:var(--s2);border:1px solid var(--border);border-radius:12px;padding:10px 12px;font-size:14px;outline:none;width:100%}
.inp:focus{border-color:var(--bh)}
.row{display:flex;gap:8px}.row>*{flex:1}
.stack{display:flex;flex-direction:column;gap:8px}
.btn-acc{background:linear-gradient(135deg,var(--acc),var(--acc2));border-radius:14px;color:#fff;font-size:14px;font-weight:700;padding:13px;width:100%}
.btn-green{background:linear-gradient(135deg,var(--green),#22c55e);color:#052e16}
.btn-ghost{background:var(--s3);border:1px solid var(--border);border-radius:14px;color:var(--text);font-size:13px;font-weight:600;padding:12px;width:100%}
.btn-ghost.danger{color:var(--red);border-color:rgba(248,113,113,.3)}
.note{font-size:11.5px;color:var(--muted);line-height:1.55;margin:10px 0}
.hint{font-size:11.5px;color:var(--dim)}
.sec-t{font-family:var(--pixel);font-size:8px;color:var(--acc2);margin:18px 0 10px;letter-spacing:.5px}
.tog{display:flex;align-items:center;gap:10px;font-size:13.5px;padding:8px 0}
.tog input{width:18px;height:18px;accent-color:var(--acc)}
.emo-row{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}
.emo{width:38px;height:38px;border-radius:10px;font-size:20px;background:var(--s2)}
.emo.on{background:rgba(124,92,255,.3);outline:2px solid var(--acc)}
.list-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px;border-radius:12px;background:var(--s2);margin-bottom:6px}
.list-row span{font-size:22px}.list-row div{flex:1}.list-row b{display:block;font-size:14px}.list-row small{font-size:11px;color:var(--muted)}.list-row em{color:var(--dim);font-style:normal}
.shop-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.wallet{font-family:var(--pixel);font-size:10px;color:#a5f3fc;background:rgba(0,0,0,.35);padding:8px 10px;border-radius:8px}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tabs button{font-size:12px;font-weight:600;padding:7px 12px;border-radius:20px;background:var(--s2);border:1px solid var(--border);color:var(--muted)}
.tabs button.on{background:rgba(124,92,255,.22);border-color:var(--bh);color:var(--acc2)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.it{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px 10px;border-radius:14px;background:var(--s2);border:1px solid var(--border);text-align:center}
.it .e{font-size:30px;line-height:1.1}
.it .n{font-size:11.5px;font-weight:600;line-height:1.25}
.it .p{font-family:var(--pixel);font-size:7px;color:#a5f3fc;line-height:1.5}
.it .bag{position:absolute;top:6px;right:7px;font-family:var(--mono);font-size:10px;color:var(--green)}
.it.locked{opacity:.42}.it.locked .e{filter:grayscale(1)}
.it.on{border-color:var(--green);box-shadow:0 0 0 1px rgba(74,222,128,.3)}
.mp-w{border:1px solid var(--border);border-radius:14px;margin-bottom:8px;overflow:hidden}
.mp-w summary{display:flex;justify-content:space-between;align-items:center;padding:12px;cursor:pointer;list-style:none;background:var(--s2)}
.mp-w summary::-webkit-details-marker{display:none}
.mp-w summary b{font-size:14px}.mp-w summary small{font-size:11px;color:var(--muted)}
.mp-list{display:flex;flex-direction:column;gap:3px;padding:8px}
.mp-f{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;text-align:left;font-size:13px;background:var(--s1)}
.mp-f i{font-style:normal;font-family:var(--pixel);font-size:8px;width:30px;height:30px;border-radius:50%;background:#0b0a18;border:2px solid #4c4585;display:flex;align-items:center;justify-content:center;color:var(--acc3)}
.mp-f.here{outline:1.5px solid var(--amber)}
.mp-f.here i{border-color:var(--amber);color:var(--amber)}
.mp-f.locked{opacity:.4}
.mp-f em{font-style:normal;color:var(--dim)}
.ach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ach{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border-radius:12px;background:var(--s2);text-align:center;border:1px solid transparent}
.ach .e{font-size:24px;filter:grayscale(1);opacity:.4}
.ach.done{border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.08)}
.ach.done .e{filter:none;opacity:1}
.ach .n{font-size:10.5px;line-height:1.3;color:var(--muted)}
.ach.done .n{color:var(--text)}
.ach .v{font-family:var(--pixel);font-size:7px;color:var(--dim)}
.ach.done .v{color:var(--amber)}
code{font-family:var(--mono);font-size:.92em;background:var(--s3);padding:1px 5px;border-radius:5px}

/* ================= editor de personaje ================= */
.av-stage{position:sticky;top:-6px;z-index:2;display:flex;justify-content:center;padding:8px 0 4px;margin:0 -18px 10px;border-bottom:1px solid var(--border);background:radial-gradient(ellipse at 50% 85%,rgba(124,92,255,.28),transparent 70%),var(--s1)}
.onb .av-stage{margin:0 -20px 12px;background:radial-gradient(ellipse at 50% 85%,rgba(124,92,255,.28),transparent 70%),var(--bg)}
.av-stage .av{width:84px;height:140px;overflow:visible}
.av-tabs{display:flex;gap:4px;background:var(--s2);border-radius:12px;padding:3px;margin-bottom:6px}
.av-tabs button{flex:1;padding:8px 4px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--muted)}
.av-tabs button.on{background:var(--s4);color:var(--text)}
.av-lbl{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1.2px;font-weight:700;margin:12px 0 7px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip-o{font-size:12.5px;padding:8px 12px;border-radius:20px;background:var(--s2);border:1.5px solid var(--border);color:var(--muted)}
.chip-o.on{border-color:var(--acc);background:rgba(124,92,255,.2);color:var(--text)}
.sw-row{display:flex;flex-wrap:wrap;gap:8px}
.sw{width:32px;height:32px;border-radius:50%;border:2px solid transparent;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
.sw.on{border-color:var(--text);transform:scale(1.12)}

/* ================= modo enfoque ================= */
.focus{position:fixed;inset:0;z-index:900;background:#07060f;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(18px + env(safe-area-inset-top,0px)) 16px calc(20px + var(--safe-b));overflow:hidden}
.fc-rain{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none}
.fc-top{position:relative;display:flex;align-items:center;gap:12px;align-self:stretch;max-width:520px;margin:0 auto;width:100%}
.fc-emoji{font-size:34px}
.fc-top b{display:block;font-size:18px;font-weight:700}
.fc-top small{font-size:12px;color:var(--muted)}
.fc-ring{position:relative;display:flex;align-items:center;justify-content:center}
.fc-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}
.fc-time{font-family:var(--mono);font-weight:700;font-size:clamp(46px,14vw,68px);letter-spacing:-2px;color:#f5f3ff;text-shadow:0 0 24px rgba(167,139,250,.45)}
.fc-bin{font-family:var(--mono);font-size:12px;color:var(--cyan);letter-spacing:2px;opacity:.85}
.fc-pct{font-family:var(--pixel);font-size:8px;color:var(--acc3)}
.fc-hero{position:relative;width:70px;height:116px}
.fc-hero .av{width:100%;height:100%;overflow:visible}
.fc-prop{position:absolute;right:-26px;top:44px;font-size:24px}
.a-read .av,.a-type .av,.a-write .av{animation:nod 3s ease-in-out infinite}
.a-float .av{animation:floaty 4s ease-in-out infinite}
.a-flex .av{animation:actFlex 1.6s ease-in-out infinite}.a-flex .arm{animation:armUp 1.6s ease-in-out infinite}
.a-eat .av,.a-talk .av{animation:bob .6s ease-in-out infinite alternate}
.a-music .av,.a-clean .av{animation:sway 2s ease-in-out infinite}
.a-walk .leg-l{animation:legA .6s linear infinite}.a-walk .leg-r{animation:legB .6s linear infinite}.a-walk .arm-l{animation:legB .6s linear infinite}.a-walk .arm-r{animation:legA .6s linear infinite}
.a-jump .av{animation:floaty 3s ease-in-out infinite}
.fc-hero.won .av{animation:actJump 1.1s cubic-bezier(.22,1,.36,1) 2}
@keyframes nod{0%,100%{transform:rotate(0)}50%{transform:rotate(2.5deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.fc-msg{position:relative;font-size:12.5px;color:var(--muted);text-align:center;max-width:320px;line-height:1.5;min-height:18px}
.fc-actions{position:relative}
.fc-pause{font-size:14px;font-weight:600;color:var(--muted);padding:12px 28px;border-radius:30px;border:1px solid var(--border);background:rgba(17,17,32,.7)}
.fc-modal,.fc-done{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(7,6,15,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:5}
.fc-card{max-width:360px;background:var(--s1);border:1px solid var(--bh);border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:12px;animation:pop .25s both}
.fc-card b{font-size:18px}
.fc-card p{font-size:13.5px;color:var(--muted);line-height:1.55}
.fc-card strong{color:var(--text)}
.fc-card ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:13px;line-height:1.45;color:var(--acc3)}
.fc-keep{background:linear-gradient(135deg,var(--green),#22c55e);color:#052e16;font-weight:700;padding:13px;border-radius:14px;font-size:15px}
.fc-stop{color:var(--muted);font-size:13px;padding:8px}
.fc-done{flex-direction:column;gap:12px;text-align:center}
.fc-crown{font-size:96px;animation:crownIn 1s cubic-bezier(.22,1,.36,1) both,crownGlow 2s 1s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(251,191,36,.8))}
@keyframes crownIn{0%{transform:translateY(-120px) scale(.3) rotate(-30deg);opacity:0}60%{transform:translateY(10px) scale(1.15) rotate(6deg);opacity:1}100%{transform:none}}
@keyframes crownGlow{50%{filter:drop-shadow(0 0 50px rgba(251,191,36,1));transform:scale(1.06)}}
.fc-done b{font-size:22px}
.fc-done p{font-size:13.5px;color:var(--acc3)}
.fc-claim{margin-top:8px;background:linear-gradient(135deg,#fde68a,#f59e0b);color:#1c1204;font-weight:700;font-size:15px;padding:15px 22px;border-radius:16px;animation:pulse 1.6s infinite}

/* ================= configuración inicial ================= */
.onb{position:fixed;inset:0;z-index:850;background:var(--bg);background-image:radial-gradient(ellipse 90% 50% at 50% 0%,rgba(124,92,255,.2),transparent 70%);display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.onb-top{max-width:520px;width:100%;margin:0 auto;padding:16px 20px 8px;display:flex;align-items:center;gap:12px}
.onb-steps{flex:1;display:flex;gap:5px}
.onb-steps i{flex:1;height:5px;border-radius:3px;background:var(--s3)}
.onb-steps i.on{background:linear-gradient(90deg,var(--acc),var(--cyan))}
.onb-skip{font-size:12.5px;color:var(--acc3)}
.onb-body{flex:1;overflow-y:auto;max-width:520px;width:100%;margin:0 auto;padding:10px 20px 20px;animation:fu .35s ease both}
.onb-eyebrow{font-family:var(--pixel);font-size:8.5px;color:var(--acc2);letter-spacing:1px;margin-bottom:12px}
.onb-h{font-size:25px;font-weight:700;letter-spacing:-.8px;line-height:1.15;text-wrap:balance;margin-bottom:8px}
.onb-p{font-size:14px;color:var(--muted);line-height:1.55;margin-bottom:16px;max-width:60ch}
.onb-p b{color:var(--text)}
.onb-foot{max-width:520px;width:100%;margin:0 auto;padding:12px 20px 18px;display:flex;gap:10px}
.onb-foot .btn-ghost{width:auto;padding:13px 18px}
.onb-foot .btn-acc{flex:1}
.onb-add{font-size:13px;color:var(--acc2);font-weight:600;padding:10px 0}
.onb-boot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;height:100%;text-align:center;font-family:var(--pixel)}
.onb-boot b{font-size:18px;color:#fde68a}
.onb-boot span{font-size:9px;color:var(--acc3)}
.onb-boot .blink{animation:blinkA 1s infinite;color:#fff}
.hb-list{display:flex;flex-direction:column;gap:8px;margin:14px 0 4px}
.hb-row{background:var(--s1);border:1px solid var(--border);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:8px;animation:pop .25s both}
.hb-l1{display:flex;gap:8px;align-items:center}
.hb-e{width:44px;text-align:center;font-size:20px;background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:6px 0}
.hb-n{flex:1;min-width:0;background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:9px 10px;font-size:14px;outline:none}
.hb-x{color:var(--dim);padding:6px}
.hb-l2{display:flex;gap:10px;flex-wrap:wrap}
.hb-l2 label{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.hb-l2 input{background:var(--s2);border:1px solid var(--border);border-radius:9px;padding:7px 8px;font-size:13px;width:74px;outline:none}
.hb-l2 input[type=time]{width:122px}
.hb-days{display:flex;gap:4px}
.hb-days button{flex:1;height:28px;border-radius:8px;background:var(--s2);font-family:var(--pixel);font-size:7.5px;color:var(--dim);border:1px solid var(--border)}
.hb-days button.on{background:rgba(124,92,255,.3);color:#fff;border-color:var(--acc)}
.hb-days.big button{height:36px;font-size:9px}
.rules{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.rules b{color:var(--text)}
.io-intro{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:6px}
.io-intro canvas{position:absolute;inset:-20px -20px auto;height:260px;width:calc(100% + 40px);opacity:.35;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.io-big{position:relative;height:96px;margin-top:22px;perspective:400px}
.io-big .logo-flip{width:130px;height:92px;animation-duration:6s}
.io-big .lf{font-size:92px;line-height:92px;letter-spacing:-4px}
.io-def{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;text-align:left;margin:74px 0 18px;max-width:340px}
.io-def b{font-family:var(--mono);font-size:17px;color:var(--acc2);text-align:right}
.io-def span{font-size:14px;color:var(--muted);line-height:1.45;align-self:center}
.io-intro.small .io-def{margin-top:64px}
.io-intro .onb-p{text-align:center}

.toast{position:fixed;left:50%;top:calc(66px + env(safe-area-inset-top,0px));transform:translate(-50%,-20px);background:var(--s2);border:1px solid var(--bh);border-radius:14px;padding:10px 16px;font-size:13px;z-index:1000;opacity:0;pointer-events:none;transition:all .3s;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (min-width:560px){.console{margin:0;border-radius:34px 34px 0 0}}
@media (max-width:370px){.dpad{grid-template-columns:repeat(3,33px);grid-template-rows:repeat(3,33px)}.ab button{width:46px;height:46px}.screen{height:360px}}
/* con "reducir movimiento" se apagan los efectos bruscos, pero las escenas siguen vivas y más lentas */
@media (prefers-reduced-motion:reduce){*:not(.fs):not(.fs *):not(.scene *):not(.lf):not(.bz-io),*:not(.fs *):not(.scene *)::before,*:not(.fs *):not(.scene *)::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ================= Game Boy avanzado: bisagra + segunda pantalla ================= */
.hinge{display:flex;align-items:center;gap:10px;margin:10px -2px 12px;height:22px}
.hinge>i{width:54px;height:16px;border-radius:8px;background:linear-gradient(180deg,#3a2f80,#1a1448 60%,#2a2166);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 2px 4px rgba(0,0,0,.45)}
.grille{flex:1;height:14px;background:radial-gradient(circle,#0b0822 1.6px,transparent 2px) 0 0/9px 7px;opacity:.8;border-radius:7px}
.lower{position:relative;scroll-margin-top:calc(56px + env(safe-area-inset-top,0px))}
#achSec{scroll-margin-top:130px}
.ltabs{position:sticky;top:calc(52px + env(safe-area-inset-top,0px));z-index:40;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:5px;margin-bottom:10px;border-radius:16px;background:rgba(11,10,24,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(167,139,250,.18);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.ltabs button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 6px;border-radius:11px;color:#8f86c9;transition:background .2s,color .2s,transform .12s}
.ltabs button i{font-style:normal;font-size:18px;line-height:1;filter:grayscale(.6);transition:filter .2s,transform .2s}
.ltabs button span{font-family:var(--pixel);font-size:6.5px;letter-spacing:.3px}
.ltabs button:active{transform:scale(.94)}
.ltabs button.on{background:linear-gradient(180deg,rgba(124,92,255,.35),rgba(124,92,255,.12));color:#fff;box-shadow:inset 0 0 0 1px rgba(167,139,250,.45),0 0 16px rgba(124,92,255,.25)}
.ltabs button.on i{filter:none;transform:translateY(-1px) scale(1.1)}
.ltabs em{position:absolute;top:2px;right:calc(50% - 22px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--pink);color:#fff;font:700 9px/16px var(--mono);font-style:normal;text-align:center;box-shadow:0 0 0 2px #0b0a18;animation:pop .3s both,pulseP 1.8s 1s infinite}
@keyframes pulseP{50%{box-shadow:0 0 0 2px #0b0a18,0 0 10px var(--pink)}}
.lscreen{position:relative;min-height:440px;border-radius:20px;padding:14px 12px 16px;background:radial-gradient(ellipse 120% 60% at 50% 0%,rgba(124,92,255,.14),transparent 70%),#0b0a18;box-shadow:inset 0 2px 10px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.07);overflow:hidden}
.lscreen::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);border-radius:inherit}
.lpane{position:relative;z-index:1;animation:paneIn .28s cubic-bezier(.22,1,.36,1) both}
@keyframes paneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lpane .hab{background:#141330}
.lpane .h-head h2{font-size:15px}
.pg-sec{margin-top:16px;padding-top:14px;border-top:1px dashed rgba(167,139,250,.16)}
.chips-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 2px;margin-bottom:10px}
.chips-row::-webkit-scrollbar{display:none}
.chips-row button{flex-shrink:0;font-size:12px;font-weight:600;padding:7px 12px;border-radius:20px;background:#141330;border:1px solid var(--border);color:var(--muted);transition:all .15s}
.chips-row button.on{background:rgba(124,92,255,.25);border-color:var(--bh);color:#fff}
/* accesos rápidos en Hoy */
.quick{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:14px -12px 0;padding:2px 12px}
.quick::-webkit-scrollbar{display:none}
.qk{flex-shrink:0;display:flex;align-items:center;gap:10px;min-width:190px;max-width:250px;text-align:left;padding:10px 12px;border-radius:14px;background:#141330;border:1px solid var(--border)}
.qk-e{font-size:26px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.qk b{display:block;font-size:12.5px}.qk small{font-size:11px;color:var(--muted);display:block;line-height:1.35}
.qk-deal{border-color:var(--rc,var(--bh));box-shadow:0 0 14px -4px var(--rc,transparent)}
.qk-rank{border-color:rgba(251,191,36,.35)}
/* rarezas */
.r-comun{--rc:#94a3b8}.r-raro{--rc:#38bdf8}.r-epico{--rc:#a78bfa}.r-legend{--rc:#fbbf24}
.rt{display:inline-block;font-style:normal;font-family:var(--pixel);font-size:6.5px;letter-spacing:.3px;padding:3px 5px;border-radius:4px;color:#0b0a18;background:var(--rc,#94a3b8);margin-right:3px}
/* tienda */
.sh-wallet{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-bottom:12px}
.sw-bits{padding:8px 12px;border-radius:12px;background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(34,211,238,.04));border:1px solid rgba(34,211,238,.3)}
.sw-bits small,.sw-col small{display:block;font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.sw-bits b{font-family:var(--pixel);font-size:13px;color:#a5f3fc}.sw-bits i{font-style:normal;color:var(--cyan);margin-right:4px}
.sw-col b{font-family:var(--pixel);font-size:11px}.sw-col b span{color:var(--dim);font-size:8px}
.sw-bar{height:6px;border-radius:3px;background:#1f1d45;overflow:hidden;margin-top:5px}
.sw-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--cyan));border-radius:3px;transition:width .8s}
.sw-share{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:18px;padding:6px 10px;border-radius:12px;background:#141330;border:1px solid var(--border)}
.sw-share span{font-family:var(--pixel);font-size:6px;color:var(--acc3)}
.deal{position:relative;display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;padding:20px 12px 12px;border-radius:18px;margin-bottom:10px;background:radial-gradient(ellipse at 15% 50%,color-mix(in srgb,var(--rc) 30%,transparent),transparent 60%),linear-gradient(135deg,#1c1840,#12102a);border:1.5px solid var(--rc);box-shadow:0 0 24px -8px var(--rc);overflow:hidden}
.deal::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.1) 50%,transparent 60%);transform:translateX(-100%);animation:shine 3.5s 1s infinite;pointer-events:none}
@keyframes shine{0%{transform:translateX(-100%)}40%,100%{transform:translateX(100%)}}
.deal-tag{position:absolute;top:0;left:14px;font-family:var(--pixel);font-size:6.5px;color:#0b0a18;background:var(--rc);padding:4px 7px;border-radius:0 0 6px 6px}
.deal-e{font-size:48px;line-height:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));animation:floaty 3s ease-in-out infinite}
.deal-t b{display:block;font-size:15px}
.deal-t small{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.deal-t s{color:var(--dim)}.deal-t strong{color:#a5f3fc;font-family:var(--mono)}
.deal-buy{font-weight:700;font-size:13px;padding:11px 14px;border-radius:12px;background:linear-gradient(135deg,var(--green),#22c55e);color:#052e16;animation:pulseG 1.8s infinite}
.deal-buy[data-poor]{background:#232046;color:var(--muted);animation:none;font-size:11.5px}
.deal.taken{grid-template-columns:40px 1fr;padding:12px;border:1px dashed var(--border);box-shadow:none;background:#12102a}
.deal.taken .deal-e{font-size:24px;color:var(--green);animation:none;text-align:center}
.mbox{position:relative;width:100%;display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;text-align:left;padding:12px;border-radius:18px;margin-bottom:12px;background:linear-gradient(120deg,#3b1d6e,#1e1b4b 50%,#0e3a44);border:1.5px solid rgba(167,139,250,.5);box-shadow:0 0 22px -6px rgba(167,139,250,.6);overflow:hidden}
.mbox::before{content:'1 0 1 1 0 1 0 0 1 0 1 1 0 1';position:absolute;right:-10px;top:-4px;font-family:var(--mono);font-size:22px;color:rgba(255,255,255,.04);letter-spacing:4px;white-space:nowrap}
.mb-ic{position:relative;font-size:44px;line-height:1;animation:boxWiggle 2.6s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(251,191,36,.45))}
@keyframes boxWiggle{0%,70%,100%{transform:none}75%{transform:rotate(-8deg)}80%{transform:rotate(8deg)}85%{transform:rotate(-5deg)}90%{transform:rotate(3deg)}}
.mb-t b{display:block;font-size:15px}
.mb-t small{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px}
.mb-p{font-family:var(--pixel);font-size:10px;color:#a5f3fc;background:rgba(0,0,0,.4);padding:9px 10px;border-radius:10px}
.mbox.locked{filter:grayscale(.7);opacity:.7}.mbox.locked .mb-ic{animation:none}
.sh-hint{font-size:12px;color:var(--acc3);background:rgba(124,92,255,.1);border-radius:10px;padding:8px 10px;margin-bottom:10px}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.si{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 6px 10px;border-radius:14px;text-align:center;background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 14%,#141330),#141330 70%);border:1px solid color-mix(in srgb,var(--rc) 45%,transparent);transition:transform .12s}
.si:active{transform:scale(.95)}
.r-epico.si,.r-legend.si{box-shadow:0 0 14px -5px var(--rc)}
.r-legend.si::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 40%,rgba(253,230,138,.18) 50%,transparent 60%);animation:shine 4s infinite;pointer-events:none}
.si-e{font-size:32px;line-height:1.1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.si-n{font-size:11px;font-weight:600;line-height:1.25}
.si-p{font-family:var(--pixel);font-size:7px;color:#a5f3fc;line-height:1.5}
.si.poor .si-p{color:var(--dim)}
.si.locked{opacity:.45}.si.locked .si-e{filter:grayscale(1) brightness(.6)}
.si.on{border-color:var(--green)}
.si-new{position:absolute;top:-5px;left:50%;transform:translateX(-50%);font-style:normal;font-family:var(--pixel);font-size:5.5px;padding:3px 5px;border-radius:4px;background:var(--pink);color:#fff;animation:pulseP 1.8s infinite}
.si-own{position:absolute;top:5px;right:6px;font-style:normal;font:700 10px var(--mono);color:var(--green)}
/* ficha del objeto */
.is-hero{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 0 14px;margin:0 -18px 12px;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--rc) 35%,transparent),transparent 62%)}
.is-e{font-size:88px;line-height:1;filter:drop-shadow(0 10px 16px rgba(0,0,0,.5));animation:floaty 3s ease-in-out infinite}
.is-av .av{width:90px;height:150px;overflow:visible}
.is-info{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.is-info div{background:var(--s2);border-radius:12px;padding:9px 10px}
.is-info small{display:block;font-size:9.5px;color:var(--dim);text-transform:uppercase;letter-spacing:1px}
.is-info b{font-size:12.5px}.is-info s{color:var(--dim)}
.lock-box{background:var(--s2);border-radius:14px;padding:12px;text-align:center}
.lock-box b{display:block;font-size:14px}.lock-box small{font-size:12px;color:var(--muted)}
.btn-acc.poor{background:var(--s3);color:var(--muted)}
/* caja sorpresa: revelación */
.reveal{position:fixed;inset:0;z-index:920;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--rc,#7c5cff) 40%,transparent),rgba(7,6,15,.94) 60%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fu .2s both}
.reveal[data-r="comun"]{--rc:#94a3b8}.reveal[data-r="raro"]{--rc:#38bdf8}.reveal[data-r="epico"]{--rc:#a78bfa}.reveal[data-r="legend"]{--rc:#fbbf24}
.rv-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;max-width:340px;width:100%}
.rv-box{position:relative;font-size:110px;line-height:1;animation:rvShake 1.2s ease-in both;filter:drop-shadow(0 0 30px rgba(251,191,36,.6))}
@keyframes rvShake{0%{transform:scale(.4)}15%{transform:scale(1)}25%,45%,65%{transform:rotate(-10deg)}35%,55%,75%{transform:rotate(10deg)}85%{transform:scale(1.25)}100%{transform:scale(1.6);opacity:0}}
.rv-tap{font-family:var(--pixel);font-size:8px;color:var(--acc3);animation:blinkA .6s infinite}
.rv-rays{position:absolute;top:-10px;left:50%;width:360px;height:360px;margin-left:-180px;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--rc) 45%,transparent) 0 10deg,transparent 10deg 24deg);-webkit-mask-image:radial-gradient(circle,#000 20%,transparent 65%);mask-image:radial-gradient(circle,#000 20%,transparent 65%);animation:spin 9s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.rv-item{position:relative;font-size:110px;line-height:1.1;margin-top:40px;animation:rvPop .7s cubic-bezier(.22,1.6,.36,1) both;filter:drop-shadow(0 0 30px var(--rc))}
@keyframes rvPop{0%{transform:scale(0) rotate(-40deg)}100%{transform:none}}
.rv-in .rt{position:relative;font-size:9px;padding:5px 9px;margin-top:30px;animation:pop .4s .3s both}
.rv-in h3{position:relative;font-size:24px;font-weight:700;animation:fu .3s .35s both}
.rv-in p{position:relative;font-size:13px;color:var(--acc3);animation:fu .3s .45s both}
.rv-btns{position:relative;display:flex;flex-direction:column;gap:8px;width:100%;margin-top:10px;animation:fu .3s .55s both}
.rv-bin{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.rv-bin i{position:absolute;top:-20px;left:var(--x);font:700 16px var(--mono);font-style:normal;color:var(--rc);opacity:.8;animation:binFall 2.4s var(--d) ease-in both}
@keyframes binFall{to{transform:translateY(110vh) rotate(180deg);opacity:0}}
/* ranking */
.rk-head{display:flex;align-items:center;gap:8px}
.rk-head .chips-row{flex:1;margin:0}
.rk-ref{width:34px;height:34px;border-radius:10px;background:#141330;border:1px solid var(--border);color:var(--acc3);font-size:16px}
.rk-note{font-size:12px;color:var(--muted);line-height:1.5;background:rgba(124,92,255,.08);border:1px dashed var(--bh);border-radius:12px;padding:9px 11px;margin:10px 0}
.rk-note b{color:var(--text)}.rk-note small{color:var(--dim)}
.rk-join{background:linear-gradient(135deg,rgba(124,92,255,.22),rgba(34,211,238,.08));border:1px solid var(--bh);border-radius:16px;padding:12px;margin:10px 0;display:flex;flex-direction:column;gap:6px}
.rk-join small{font-size:11.5px;color:var(--muted)}
.rk-chase{font-size:12.5px;padding:9px 11px;border-radius:12px;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.3);color:#fde68a;margin:10px 0}
.rk-chase.gold{text-align:center}
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:6px;margin:18px 0 12px}
.pd{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;min-width:0}
.pd b{font-size:11.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd small{font-size:9.5px;color:var(--muted)}
.pd>i{width:100%;display:flex;align-items:flex-start;justify-content:center;padding-top:6px;margin-top:4px;font-style:normal;font-family:var(--pixel);font-size:14px;color:#0b0a18;border-radius:8px 8px 0 0;box-shadow:inset 0 2px 0 rgba(255,255,255,.35)}
.pd-1>i{height:74px;background:linear-gradient(180deg,#fde68a,#d97706)}
.pd-2>i{height:52px;background:linear-gradient(180deg,#e2e8f0,#94a3b8)}
.pd-3>i{height:38px;background:linear-gradient(180deg,#fdba74,#b45309)}
.pd-crown{position:absolute;top:-18px;font-size:20px;animation:floaty 2s ease-in-out infinite;z-index:2}
.pd-face{width:56px;height:56px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 30%,#2e2a66,#141330);border:2px solid rgba(255,255,255,.2)}
.pd-1 .pd-face{width:68px;height:68px;border-color:#fbbf24;box-shadow:0 0 18px rgba(251,191,36,.45)}
.pd.me .pd-face{border-color:var(--cyan)}
.pd-face .av,.rk-face .av{width:100%;height:100%}
.rk-list{list-style:none;display:flex;flex-direction:column;gap:5px}
.rk{display:grid;grid-template-columns:28px 36px 1fr auto;align-items:center;gap:9px;padding:6px 10px 6px 6px;border-radius:12px;background:#141330;border:1px solid transparent}
.rk.me{border-color:var(--cyan);background:linear-gradient(90deg,rgba(34,211,238,.14),#141330);box-shadow:0 0 14px -4px var(--cyan)}
.rk-pos{font-family:var(--pixel);font-size:9px;color:var(--dim);text-align:center}
.rk-face{width:36px;height:36px;border-radius:50%;overflow:hidden;background:#221f4a;display:block}
.rk-n{min-width:0}
.rk-n b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-n b em{font-style:normal;font-family:var(--pixel);font-size:6px;background:var(--cyan);color:#0b0a18;padding:2px 4px;border-radius:3px;vertical-align:2px}
.rk-n small{font-size:10.5px;color:var(--muted)}
.rk-xp{font-family:var(--mono);font-size:13px;font-weight:700;color:#a5f3fc;text-align:right}
.rk-xp small{display:block;font-size:8.5px;color:var(--dim);font-weight:400}
.rk-me-sep{text-align:center;color:var(--dim);letter-spacing:4px;margin:4px 0}
/* progreso */
.wch{border-radius:16px;padding:12px;background:linear-gradient(135deg,rgba(251,191,36,.12),rgba(124,92,255,.1));border:1px solid rgba(251,191,36,.3)}
.wch.compact{margin-top:14px}
.wch-h{display:flex;justify-content:space-between;align-items:baseline}
.wch-h b{font-size:14px}.wch-h small{font-size:11px;color:var(--muted)}
.wch p{font-size:12px;color:var(--muted);margin:5px 0 8px}.wch p b{color:#fde68a}
.wch-bar{position:relative;height:16px;border-radius:5px;background:#1f1d45;overflow:hidden}
.wch-bar i{display:block;height:100%;background:repeating-linear-gradient(90deg,#fbbf24 0 8px,#f59e0b 8px 10px);transition:width .8s}
.wch-bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--pixel);font-size:7px;color:#fff;text-shadow:1px 1px 0 #000}
.wch-go{width:100%;margin-top:10px;padding:11px;border-radius:12px;font-weight:700;background:linear-gradient(135deg,#fde68a,#f59e0b);color:#1c1204;animation:pulse 1.6s infinite}
.wch.claimed{opacity:.7}
.mg{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.mg-e{font-size:20px;width:28px;text-align:center}
.mg-b{flex:1;min-width:0}
.mg-t{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:4px}
.mg-t b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mg-t small{font-family:var(--mono);font-size:10px;color:var(--muted);white-space:nowrap}
.mg-bar{height:8px;border-radius:4px;background:#1f1d45;overflow:hidden}
.mg-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--green));border-radius:4px}
.heat{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.hcol{display:grid;grid-template-rows:repeat(7,1fr);gap:4px}
.hcol i{aspect-ratio:1;border-radius:3px;display:flex;align-items:center;justify-content:center;font:700 9px var(--mono);font-style:normal;color:#3b3770;background:#141330}
.hcol i.h1{background:#3b2f8f;color:#c4b5fd}.hcol i.h2{background:#6d4fe0;color:#fff}.hcol i.h3{background:linear-gradient(135deg,#4ade80,#22c55e);color:#052e16;box-shadow:0 0 6px rgba(74,222,128,.4)}
.hcol i.hf{background:transparent;border:1px dashed #1f1d45}
.lpane .stats{grid-template-columns:repeat(3,1fr)}
.lpane .stats div{background:#141330}
.ach{position:relative;overflow:hidden}
.ach-bar{position:absolute;left:0;bottom:0;height:3px;background:var(--acc2);opacity:.6}
.ach.done .ach-bar{background:var(--amber)}
/* mundo */
.wd-card{display:grid;grid-template-columns:86px 1fr;gap:12px;align-items:center;padding:12px;border-radius:18px;background:radial-gradient(ellipse at 15% 80%,rgba(124,92,255,.3),transparent 60%),#141330;border:1px solid var(--border)}
.wd-av .av{width:80px;height:132px;overflow:visible}
.wd-inf small{display:block;font-size:10.5px;color:var(--muted)}
.wd-inf>small:first-child{font-family:var(--pixel);font-size:7px;color:var(--amber);letter-spacing:.5px}
.wd-inf b{display:block;font-size:18px;margin:2px 0}
.wd-inf span{font-size:12px;color:var(--acc3)}
.wd-xp{height:10px;border:1.5px solid rgba(255,255,255,.5);border-radius:3px;overflow:hidden;margin:8px 0 4px}
.wd-xp i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--green) 0 6px,#22c55e 6px 8px)}
.wd-btns{display:flex;gap:6px;margin-top:8px}
.wd-btns button{flex:1;white-space:nowrap;font-size:12px;font-weight:600;padding:8px;border-radius:10px;background:var(--s3);border:1px solid var(--border)}
.tower{margin:14px auto 0;max-width:330px;border-radius:10px 10px 0 0;padding:0 10px;background:linear-gradient(90deg,#231d52,#2d2566 50%,#231d52);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.tower[data-skin="torre"]{background:linear-gradient(90deg,#1e293b,#334155 50%,#1e293b)}
.tower[data-skin="rasca"]{background:linear-gradient(90deg,#1c1917,#3b2f15 50%,#1c1917)}
.tower[data-skin="nubes"]{background:linear-gradient(90deg,#4b5188,#6366f1 50%,#4b5188)}
.tower[data-skin="orbital"]{background:linear-gradient(90deg,#082f36,#0e3a44 50%,#082f36)}
.tw-roof{text-align:center;padding:12px 0 8px;border-bottom:3px solid rgba(0,0,0,.35)}
.tw-roof b{display:block;font-family:var(--pixel);font-size:8.5px;color:#fde68a}.tw-roof small{font-size:10.5px;color:var(--muted)}
.tw-f{width:100%;display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;padding:7px 8px;margin:4px 0;border-radius:6px;text-align:left;font-size:12.5px;background:linear-gradient(180deg,#fde68a22,#0b0a1855);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.tw-f i{font-style:normal;font-family:var(--pixel);font-size:8px;color:var(--acc3);text-align:center}
.tw-f em{font-style:normal;font-size:11px;color:var(--dim)}
.tw-f.here{background:linear-gradient(90deg,rgba(251,191,36,.35),rgba(251,191,36,.08));box-shadow:inset 0 0 0 1.5px var(--amber)}
.tw-f.here em{color:var(--amber)}
.tw-f.next{background:repeating-linear-gradient(135deg,#1a173a 0 8px,#221e4a 8px 16px);box-shadow:inset 0 0 0 1px rgba(74,222,128,.4)}
.tw-f.next em{color:var(--green);font-family:var(--pixel);font-size:7px}
.tw-f.locked:not(.next){background:#0f0d24;color:#3b3770}
.tw-base{text-align:center;font-family:var(--pixel);font-size:7px;color:var(--muted);padding:10px 0;border-top:3px solid rgba(0,0,0,.35)}
.mile{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;margin-bottom:8px}
.mile i{grid-row:span 2;font-style:normal;font-family:var(--pixel);font-size:9px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#0b0a18;border:2px solid #4c4585;color:var(--acc3)}
.mile b{font-size:13px}.mile small{font-size:11px;color:var(--muted)}
.lpane .stack{margin-top:12px}

/* ================= escenas del modo enfoque: el personaje hace tu hábito ================= */
[data-mood="calm"] .ey-tired,[data-mood="calm"] .mo-neutral{display:block}
.fs{position:relative;width:min(300px,86vw);height:190px;margin:0 auto;border-radius:22px;overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 50% 100%,rgba(124,92,255,.28),transparent 70%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%);mask-image:linear-gradient(180deg,transparent,#000 22%)}
.fs-bg,.fs-back,.fs-front{position:absolute;inset:0;pointer-events:none}
.fs-char{position:absolute;left:50%;bottom:6px;width:100px;height:167px;margin-left:-50px;z-index:2}
.fs-char .av{width:100%;height:100%;overflow:visible;transform-origin:50% 100%}
.fs-front{z-index:3}
.fs .arm,.fs .leg{transition:transform .4s}
.fs text{user-select:none}
/* partículas genéricas */
.fx-fl{position:absolute;bottom:30%;left:var(--x);font-style:normal;font:700 14px var(--mono);color:var(--acc3);opacity:0;animation:flUp 4.2s calc(var(--i) * .7s) ease-out infinite}
@keyframes flUp{0%{opacity:0;transform:translateY(10px) scale(.6)}20%{opacity:.9}100%{opacity:0;transform:translateY(-90px) scale(1.1) rotate(20deg)}}
/* leer / estudiar */
.fs-read .arm-l,.fs-study .arm-l{transform:rotate(-26deg)}
.fs-read .arm-r,.fs-study .arm-r{transform:rotate(26deg)}
.fs-read .av-head,.fs-study .av-head{transform-box:view-box;transform-origin:60px 62px;animation:readNod 5s ease-in-out infinite}
@keyframes readNod{0%,100%{transform:rotate(0) translateY(1px)}40%{transform:rotate(-3deg) translateY(2px)}70%{transform:rotate(2deg) translateY(2px)}}
.fs-read .page{transform-box:fill-box;transform-origin:50% 50%;animation:pageFlip 6s ease-in-out infinite}
@keyframes pageFlip{0%,88%,100%{transform:rotate(-26deg) scaleX(1)}93%{transform:rotate(-26deg) scaleX(-1)}}
/* escribir / dibujar */
.fs-write .arm-l,.fs-draw .arm-l{transform:rotate(-24deg)}
.fs-write .arm-r{animation:scribble .5s ease-in-out infinite alternate}
@keyframes scribble{from{transform:rotate(20deg)}to{transform:rotate(30deg) translateY(-1px)}}
.fs-draw .arm-r{animation:paint 1.8s ease-in-out infinite}
@keyframes paint{0%,100%{transform:rotate(-40deg)}50%{transform:rotate(-70deg)}}
.fx-easel{position:absolute;right:12%;bottom:14px;width:62px;height:70px;border:4px solid #92400e;border-bottom-width:10px;background:#f8fafc;border-radius:3px;transform:rotate(4deg)}
.fx-easel i{position:absolute;inset:8px;background:linear-gradient(135deg,#f472b6 0 30%,#22d3ee 30% 55%,#fbbf24 55%);clip-path:inset(0 100% 0 0);animation:reveal 8s linear infinite}
@keyframes reveal{to{clip-path:inset(0 0 0 0)}}
.fs-draw .fs-char{margin-left:-80px}
/* trabajar */
.fs-type .arm-l{animation:tap .28s ease-in-out infinite alternate;transform:rotate(-22deg)}
.fs-type .arm-r{animation:tap2 .28s .14s ease-in-out infinite alternate}
@keyframes tap{from{transform:rotate(-22deg)}to{transform:rotate(-26deg)}}
@keyframes tap2{from{transform:rotate(22deg)}to{transform:rotate(26deg)}}
.fx-desk{position:absolute;left:50%;bottom:8px;width:150px;height:62px;margin-left:-75px;border-top:6px solid #7c4a1f;background:linear-gradient(180deg,rgba(124,74,31,.35),transparent)}
.fx-laptop{position:absolute;left:50%;top:-44px;margin-left:-22px;font-size:40px;filter:drop-shadow(0 0 10px rgba(34,211,238,.5))}
.fs-type .fx-fl{color:var(--cyan)}
/* idiomas */
.fs-talk .arm-r{animation:gesture 1.6s ease-in-out infinite}
@keyframes gesture{0%,100%{transform:rotate(0)}30%{transform:rotate(-120deg)}60%{transform:rotate(-90deg)}}
.fs-talk .mouth{animation:talkM .3s steps(2) infinite}
.fx-bub{position:absolute;top:10%;left:58%;padding:6px 10px;border-radius:14px 14px 14px 4px;background:#fff;color:#1c1440;font:700 12px var(--font);white-space:nowrap;opacity:0;animation:bub 8s calc(var(--i) * 2s) infinite}
@keyframes bub{0%{opacity:0;transform:translateY(10px) scale(.7)}5%,20%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-12px)}}
/* meditar / respirar / orar / yoga */
.fs-float .fs-char{animation:floaty 5s ease-in-out infinite}
.fs-float .arm-l{transform:rotate(22deg)}.fs-float .arm-r{transform:rotate(-22deg)}
.fx-aura{position:absolute;left:50%;top:44%;width:150px;height:150px;margin:-75px;border-radius:50%;background:radial-gradient(circle,rgba(167,139,250,.5),transparent 65%);animation:auraP 5s ease-in-out infinite}
@keyframes auraP{50%{transform:scale(1.25);opacity:.6}}
.fx-breath{position:absolute;left:50%;top:48%;width:170px;height:170px;margin:-85px;border-radius:50%;border:2px solid rgba(34,211,238,.5);background:radial-gradient(circle,rgba(34,211,238,.28),transparent 68%);animation:breath 8s ease-in-out infinite}
@keyframes breath{0%,100%{transform:scale(.55)}45%,55%{transform:scale(1.05)}}
.fx-breath span{position:absolute;left:0;right:0;top:-22px;text-align:center;font:700 14px var(--mono);letter-spacing:3px;color:#a5f3fc;text-transform:uppercase}
.fx-breath .in{animation:bIn 8s infinite}.fx-breath .out{animation:bOut 8s infinite}
@keyframes bIn{0%,45%{opacity:1}50%,100%{opacity:0}}
@keyframes bOut{0%,45%{opacity:0}50%,95%{opacity:1}100%{opacity:0}}
.fs-breathe .av{animation:chest 8s ease-in-out infinite}
@keyframes chest{0%,100%{transform:scale(1)}45%,55%{transform:scale(1.035,1.02)}}
.fs-breathe .arm-l{animation:armIn 8s ease-in-out infinite}.fs-breathe .arm-r{animation:armIn2 8s ease-in-out infinite}
@keyframes armIn{0%,100%{transform:rotate(0)}50%{transform:rotate(14deg)}}
@keyframes armIn2{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
.fs-pray .arm-l{transform:rotate(-36deg)}.fs-pray .arm-r{transform:rotate(36deg)}
.fx-light{position:absolute;left:50%;top:-20px;width:160px;height:220px;margin-left:-80px;background:linear-gradient(180deg,rgba(253,230,138,.45),transparent 80%);clip-path:polygon(35% 0,65% 0,100% 100%,0 100%);animation:auraP 6s ease-in-out infinite}
.fs-pray .fx-fl{color:#fde68a}
.fs-yoga .arm-l{animation:yogaL 8s ease-in-out infinite}.fs-yoga .arm-r{animation:yogaR 8s ease-in-out infinite}
.fs-yoga .leg-r{transform-box:fill-box;transform-origin:50% 0;animation:yogaLeg 8s ease-in-out infinite}
@keyframes yogaL{0%,15%,90%,100%{transform:rotate(0)}30%,75%{transform:rotate(168deg)}}
@keyframes yogaR{0%,15%,90%,100%{transform:rotate(0)}30%,75%{transform:rotate(-168deg)}}
@keyframes yogaLeg{0%,20%,85%,100%{transform:rotate(0)}35%,70%{transform:rotate(-38deg) translateX(-3px)}}
.fx-mat{position:absolute;left:50%;bottom:4px;width:150px;height:10px;margin-left:-75px;border-radius:5px;background:linear-gradient(90deg,#8b5cf6,#22d3ee)}
/* desconectar / dormir */
.fs-unplug .arm-r{transform:rotate(30deg)}
.fs-unplug .av{animation:sway 5s ease-in-out infinite}
.fx-phone{position:absolute;left:14%;top:26%;font-size:30px;animation:floaty 4s ease-in-out infinite;opacity:.8}
.fs-sleep .fs-char{bottom:-26px;transform:rotate(-90deg);transform-origin:50% 70%}
.fs-sleep .av{animation:chest 4s ease-in-out infinite}
.fx-bed{position:absolute;left:50%;bottom:6px;width:210px;height:40px;margin-left:-105px;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,#6366f1 0 40%,#e0e7ff 40% 60%,#7c4a1f 60%)}
.fx-z{position:absolute;left:62%;top:30%;font:700 18px var(--pixel);color:#c4b5fd;opacity:0;animation:zz 3s calc(var(--i) * 1s) ease-out infinite}
@keyframes zz{0%{opacity:0;transform:translate(0,10px) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translate(26px,-50px) scale(1.2)}}
/* pesas */
.fs-flex .arm-l{animation:pressL 1.6s ease-in-out infinite}
.fs-flex .arm-r{animation:pressR 1.6s .8s ease-in-out infinite}
@keyframes pressL{0%,100%{transform:rotate(12deg)}50%{transform:rotate(165deg)}}
@keyframes pressR{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(-165deg)}}
.fs-flex .av{animation:squat 1.6s ease-in-out infinite}
@keyframes squat{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.97)}}
/* caminar / correr / perro: el mundo pasa detrás */
@keyframes scroll{from{transform:translateX(330px)}to{transform:translateX(-60px)}}
.bg-park::after{content:'';position:absolute;left:0;right:0;bottom:0;height:12px;background:repeating-linear-gradient(90deg,#4ade80 0 14px,#22c55e 14px 28px);animation:ground .6s linear infinite}
@keyframes ground{to{background-position:-28px 0}}
.bg-park .leg-l{animation:legA .6s linear infinite}.bg-park .leg-r{animation:legB .6s linear infinite}
.fs-walk .arm-l,.fs-dog .arm-l{animation:legB .6s linear infinite}.fs-walk .arm-r{animation:legA .6s linear infinite}
.bg-park .av-body{animation:bob .3s ease-in-out infinite alternate}
.fs-run .leg-l{animation-duration:.36s}.fs-run .leg-r{animation-duration:.36s}.fs-run.bg-park::after{animation-duration:.3s}
.fs-run .arm-l{animation:runA .36s linear infinite}.fs-run .arm-r{animation:runB .36s linear infinite}
@keyframes runA{0%,100%{transform:rotate(35deg)}50%{transform:rotate(-35deg)}}
@keyframes runB{0%,100%{transform:rotate(-35deg)}50%{transform:rotate(35deg)}}
.fs-run .fs-char{transform:rotate(5deg)}
.fs-dog .fs-char{margin-left:-80px}
.fs-dog .arm-r{transform:rotate(-40deg)}
.fx-dog{position:absolute;left:calc(50% + 34px);bottom:8px;font-size:40px;transform:scaleX(-1);animation:dogTrot .3s ease-in-out infinite alternate}
@keyframes dogTrot{from{transform:scaleX(-1) translateY(0)}to{transform:scaleX(-1) translateY(-4px) rotate(-3deg)}}
.fx-leash{position:absolute;left:calc(50% - 6px);bottom:30px;width:74px;height:84px;overflow:visible}
.fx-leash path{fill:none;stroke:#b91c1c;stroke-width:2;vector-effect:non-scaling-stroke;animation:leash .6s ease-in-out infinite alternate}
@keyframes leash{to{d:path('M0 0 Q 40 95 100 80')}}
/* nadar */
.fs-swim .fs-char{bottom:-40px;animation:swimBob 1.2s ease-in-out infinite}
@keyframes swimBob{50%{transform:translateY(-4px) rotate(-3deg)}}
.fs-swim .arm-l{animation:crawl 1.2s linear infinite}.fs-swim .arm-r{animation:crawl 1.2s -.6s linear infinite}
@keyframes crawl{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.fx-water{position:absolute;left:0;right:0;bottom:0;height:78px;background:linear-gradient(180deg,rgba(34,211,238,.55),rgba(14,116,144,.85));overflow:hidden}
.fx-water i{position:absolute;top:-8px;left:-50%;width:200%;height:16px;background:radial-gradient(circle at 10px 0,transparent 9px,rgba(165,243,252,.9) 10px) 0 0/22px 16px;animation:ground 1.2s linear infinite}
.fx-water i+i{top:14px;opacity:.4;animation-duration:2s}
/* comer / cocinar / agua */
.fs-eat .arm-r{animation:toMouth 3s ease-in-out infinite}
@keyframes toMouth{0%,20%,100%{transform:rotate(28deg)}45%,60%{transform:rotate(132deg)}}
.fs-eat .arm-l{transform:rotate(-24deg)}
.fx-table{position:absolute;left:50%;bottom:0;width:170px;height:44px;margin-left:-85px;border-top:6px solid #a16207;background:linear-gradient(180deg,rgba(161,98,7,.35),transparent)}
.fx-table span{position:absolute;left:50%;top:-30px;margin-left:-16px;font-size:30px}
.fs-cook .arm-r{animation:flip 1.4s ease-in-out infinite}
@keyframes flip{0%,100%{transform:rotate(30deg)}40%{transform:rotate(55deg)}55%{transform:rotate(20deg)}}
.fs-cook .fx-fl{color:#fed7aa;font-size:18px}
.fs-water .arm-r{animation:drink 4s ease-in-out infinite}
@keyframes drink{0%,25%,100%{transform:rotate(20deg)}45%,70%{transform:rotate(128deg)}}
/* limpiar */
.fs-clean .arm-r{animation:sweep 1.1s ease-in-out infinite alternate}
.fs-clean .arm-l{animation:sweep2 1.1s ease-in-out infinite alternate}
@keyframes sweep{from{transform:rotate(10deg)}to{transform:rotate(-30deg)}}
@keyframes sweep2{from{transform:rotate(-10deg)}to{transform:rotate(-40deg)}}
.fx-dust{position:absolute;left:30%;right:30%;bottom:6px;height:30px}
.fx-dust i{position:absolute;bottom:0;width:10px;height:10px;border-radius:50%;background:rgba(203,213,225,.5);animation:dust 1.1s ease-out infinite}
.fx-dust i:nth-child(2){left:40%;animation-delay:.35s}.fx-dust i:nth-child(3){left:80%;animation-delay:.7s}
@keyframes dust{0%{opacity:.8;transform:scale(.4)}100%{opacity:0;transform:translate(-20px,-24px) scale(1.6)}}
/* música */
.fs-music .arm-r{animation:strum .4s ease-in-out infinite alternate}
@keyframes strum{from{transform:rotate(28deg)}to{transform:rotate(40deg)}}
.fs-music .arm-l{transform:rotate(-30deg)}
.fs-music .av{animation:sway 2s ease-in-out infinite}
.fs-music .fx-fl{font-size:20px;color:#f9a8d4}
/* ánimo general */
.fs-jump .av{animation:floaty 3s ease-in-out infinite}
.fs-excited-all .av{animation:none}
@keyframes talkM{50%{transform:scaleY(.35)}}
.fs-talk .mouth{transform-box:fill-box;transform-origin:center}
.fc-stage{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:4px}
.fc-act{font-family:var(--pixel);font-size:7.5px;color:var(--acc3);letter-spacing:.5px}
.fc-prize{position:relative;font-size:12px;color:var(--muted);display:flex;gap:10px;align-items:center;justify-content:center}
.fc-prize b{color:#fde68a;font-family:var(--mono)}
.fc-prize i{font-style:normal;color:#a5f3fc;font-family:var(--mono);font-weight:700}
.focus.won .fs .av{animation:actJump 1.1s cubic-bezier(.22,1,.36,1) 2!important}

/* ================= onboarding v2 ================= */
.onb-steps{gap:6px}
.onb-steps i{position:relative;height:5px}
.onb-steps i span{position:absolute;top:9px;left:0;font:700 9px var(--font);letter-spacing:1px;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.onb-steps i.on span{color:var(--acc3)}.onb-steps i.done{background:var(--acc)}.onb-steps i.done span{color:var(--muted)}
.onb-top{padding-bottom:22px}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px;width:100%}
.how div{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 6px;border-radius:14px;background:var(--s1);border:1px solid var(--border);text-align:center}
.how i{font-style:normal;font-family:var(--pixel);font-size:9px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--acc);color:#fff;margin-bottom:3px}
.how b{font-size:12.5px;line-height:1.25}.how small{font-size:10.5px;color:var(--muted);line-height:1.3}
.own{display:flex;gap:8px;margin-bottom:12px}
.own .inp{flex:1}.own .btn-acc{width:auto;padding:10px 14px;font-size:13px}
.cat-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -20px 10px;padding:0 20px}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tabs button{flex-shrink:0;font-size:13px;font-weight:600;padding:8px 13px;border-radius:20px;background:var(--s1);border:1px solid var(--border);color:var(--muted)}
.cat-tabs button.on{background:rgba(124,92,255,.25);border-color:var(--bh);color:#fff}
.ex-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ex-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 12px 11px;border-radius:16px;text-align:left;background:var(--s1);border:1.5px solid var(--border);transition:transform .12s,border-color .15s,background .15s}
.ex-card:active{transform:scale(.96)}
.ex-e{font-size:28px;line-height:1.1;margin-bottom:4px}
.ex-card b{font-size:13px;line-height:1.25;padding-right:18px}
.ex-card small{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.ex-card i{position:absolute;top:9px;right:9px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;font-weight:700;background:var(--s3);color:var(--acc3)}
.ex-card.on{border-color:var(--acc);background:linear-gradient(135deg,rgba(124,92,255,.25),rgba(34,211,238,.06))}
.ex-card.on i{background:var(--green);color:#052e16;animation:pop .3s both}
.hint.center{text-align:center;margin-top:16px}
.tl{margin-top:18px;padding:12px;border-radius:16px;background:var(--s1);border:1px solid var(--border)}
.tl-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.tl-h b{font-size:14px}.tl-h small{font-size:11.5px;color:var(--muted)}
.tl-bar{position:relative;height:34px;border-radius:17px;background:linear-gradient(90deg,#f97316 0%,#fbbf24 15%,#38bdf8 40%,#6366f1 72%,#1e1b4b 100%);opacity:.95}
.tl-sun,.tl-moon{position:absolute;top:50%;transform:translateY(-50%);font-size:12px;opacity:.6}.tl-sun{left:6px}.tl-moon{right:8px}
.tl-dot{position:absolute;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#0b0a18;border:2px solid #fff;font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.4);animation:pop .3s both}
.tl-ax{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:var(--dim);margin-top:5px;padding:0 2px}
.hc-list{display:flex;flex-direction:column;gap:8px}
.hc{border-radius:16px;background:var(--s1);border:1px solid var(--border);overflow:hidden;animation:pop .25s both}
.hc.open{border-color:var(--bh);box-shadow:0 0 0 1px rgba(124,92,255,.2),0 10px 30px rgba(0,0,0,.35)}
.hc-head{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:8px 8px 8px 10px}
.hc-e{width:44px;height:44px;border-radius:12px;background:var(--s2);font-size:22px}
.hc-t{text-align:left;min-width:0}
.hc-t b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-t small{font-size:11.5px;color:var(--muted)}
.hc-x{width:32px;height:32px;border-radius:10px;color:var(--dim)}
.hc-body{padding:0 12px 14px;animation:fu .25s both}
.hc-prev{position:relative;margin:0 -12px 6px;padding-bottom:8px;text-align:center;background:linear-gradient(180deg,transparent,rgba(124,92,255,.08))}
.hc-prev .fs{height:150px;width:100%}
.hc-prev .fs-char{width:80px;height:134px;margin-left:-40px}
.hc-prev span{font-size:12px;color:var(--muted)}.hc-prev b{color:var(--text)}
.hc-l{display:block;font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1.2px;font-weight:700;margin:14px 0 7px}
.hc-l em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;color:var(--dim)}
.emo-strip{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:8px -12px 0;padding:0 12px}
.emo-strip::-webkit-scrollbar{display:none}
.emo-strip button{flex-shrink:0;width:36px;height:36px;border-radius:10px;font-size:18px;background:var(--s2)}
.emo-strip button.on{background:rgba(124,92,255,.3);outline:2px solid var(--acc)}
.pick{display:flex;flex-wrap:wrap;gap:6px}
.pick button,.pick-own{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;padding:8px 11px;border-radius:12px;background:var(--s2);border:1.5px solid var(--border);color:var(--muted);min-height:40px}
.pick button small{font-family:var(--mono);font-size:10px;font-weight:400;opacity:.8}
.pick button.on{border-color:var(--acc);background:rgba(124,92,255,.25);color:#fff}
.pick-own{flex-direction:row;gap:4px;padding:4px 8px}
.pick-own input{background:none;border:none;outline:none;font-size:13px;width:92px;color:var(--text)}
.pick-own input[type=number]{width:46px}
.hc-body .hb-days{margin-top:8px}
.hc-ok{width:100%;margin-top:14px;padding:12px;border-radius:12px;font-weight:700;background:var(--s3);border:1px solid var(--bh);color:var(--acc3)}
.rules li{display:flex;gap:12px;align-items:flex-start}
.rules li span{flex-shrink:0;width:30px;height:30px;border-radius:10px;background:var(--s1);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:15px}

/* ================= mini reproductor, misiones, escudo ================= */
.mini{position:fixed;left:50%;bottom:calc(12px + var(--safe-b));z-index:200;width:calc(100% - 24px);max-width:500px;display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:9px 9px 9px 12px;border-radius:18px;background:rgba(24,22,52,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--bh);box-shadow:0 14px 34px rgba(0,0,0,.55);transform:translate(-50%,140%);transition:transform .35s cubic-bezier(.22,1,.36,1);overflow:hidden}
.mini.show{transform:translate(-50%,0)}
.mi-bar{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.06)}
.mi-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--cyan))}
.mi-e{font-size:24px;text-align:center}
.mi-t{min-width:0}.mi-t b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mi-t small{font-family:var(--mono);font-size:11px;color:var(--acc3)}
.mi-go{width:44px;height:44px;border-radius:50%;background:var(--green);color:#052e16;font-size:16px;font-weight:700;animation:pulseG 1.8s infinite}
.mi-go.crown{background:linear-gradient(135deg,#fde68a,#f59e0b);font-size:20px;animation:pulse 1.6s infinite}
.foot{padding-bottom:84px}
.qst{margin-top:14px;border-radius:16px;padding:12px;background:linear-gradient(135deg,rgba(34,211,238,.1),rgba(124,92,255,.1));border:1px solid rgba(34,211,238,.3)}
.qs{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:7px 0;border-top:1px dashed rgba(167,139,250,.14)}
.qst .wch-h{margin-bottom:4px}
.qs-e{font-size:17px;text-align:center}
.qs-n{font-size:12.5px}
.qs em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--dim)}
.qs.claimed{opacity:.5}.qs.claimed .qs-e{color:var(--green);font-weight:700}.qs.claimed .qs-n{text-decoration:line-through}
.qs-go{font:700 12px var(--mono);padding:7px 10px;border-radius:10px;background:linear-gradient(135deg,var(--green),#22c55e);color:#052e16;animation:pulseG 1.8s infinite}
.shield{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:16px;margin-bottom:12px;background:#141330;border:1px solid rgba(56,189,248,.35)}
.sh-e{font-size:30px;text-align:center}
.shield b{display:block;font-size:14px}.shield b em{font-style:normal;font-family:var(--mono);font-size:11px;color:#7dd3fc;margin-left:4px}
.shield small{font-size:11px;color:var(--muted);line-height:1.35;display:block}
.shield button{font-family:var(--pixel);font-size:9px;color:#a5f3fc;background:rgba(0,0,0,.4);padding:10px;border-radius:10px;white-space:nowrap}
.shield button:disabled{opacity:.5}
.shield.locked{opacity:.6}
/* legibilidad: la fuente pixel nunca por debajo de 7px */
.ltabs button span{font-size:7.5px}
.rt{font-size:7px}.si-p{font-size:7.5px}.si-new{font-size:6.5px}.deal-tag{font-size:7px}.gbm-f{font-size:6.5px}.ep-help{font-size:6.5px}.bezel-label{font-size:7.5px}
.btn-acc.off{opacity:.45;filter:grayscale(.5)}

/* ================= cuarto 2D: zócalo, techo, cortinas, repisas y aparador ================= */
.scene{--wood:#8b5a2b;--wood2:#5b3a1e}
[data-skin="torre"]{--wood:#94a3b8;--wood2:#475569}
[data-skin="rasca"]{--wood:#d4a24c;--wood2:#7c5a1c}
[data-skin="nubes"]{--wood:#f8fafc;--wood2:#a5b4fc}
[data-skin="orbital"]{--wood:#1e293b;--wood2:#22d3ee}
.wains{position:absolute;left:0;right:0;bottom:18%;height:15%;z-index:0;background:repeating-linear-gradient(90deg,transparent 0 46px,rgba(0,0,0,.18) 46px 48px),linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,.28));border-top:4px solid var(--trim);box-shadow:inset 0 3px 0 rgba(255,255,255,.06)}
.ceil{position:absolute;left:0;right:0;top:0;height:12px;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.45),var(--trim));box-shadow:0 3px 6px rgba(0,0,0,.35)}
.lampc{position:absolute;left:60%;top:12px;width:2px;height:20px;background:rgba(255,255,255,.35)}
.lampc::after{content:'';position:absolute;left:-11px;top:18px;width:24px;height:11px;border-radius:12px 12px 3px 3px;background:linear-gradient(180deg,#fde68a,#f59e0b);box-shadow:0 10px 40px 16px rgba(253,230,138,.16)}
[data-time="noche"] .lampc::after{box-shadow:0 14px 60px 26px rgba(253,230,138,.28)}
.curt{position:absolute;top:62px;right:44px;width:108px;height:94px;z-index:2;pointer-events:none}
.curt i{position:absolute;top:0;width:18px;height:100%;border-radius:0 0 10px 10px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 3px,transparent 3px 7px),var(--curt,#7c3aed);opacity:.9;box-shadow:0 4px 6px rgba(0,0,0,.3)}
.curt i:first-child{left:0;transform:skewX(3deg)}.curt i:last-child{right:0;transform:skewX(-3deg)}
.curt::before{content:'';position:absolute;left:-6px;right:-6px;top:-4px;height:5px;border-radius:3px;background:var(--wood2)}
[data-skin="torre"] .curt{width:134px;right:43px;height:100px;--curt:#334155}
[data-skin="rasca"] .curt{width:166px;right:42px;height:116px;top:54px;--curt:#7f1d1d}
[data-skin="nubes"] .curt{display:none}[data-skin="orbital"] .curt{display:none}
.scene.open .curt,.scene.open .wains,.scene.open .ceil{display:none}
.furn-set{position:absolute;inset:0;z-index:2;pointer-events:none;display:none}
.scene.furn .furn-set{display:block}
.shf{position:absolute;left:26%;width:26%;height:7px;border-radius:2px;background:linear-gradient(180deg,var(--wood),var(--wood2));box-shadow:0 5px 7px rgba(0,0,0,.4)}
.shf::before,.shf::after{content:'';position:absolute;top:7px;width:6px;height:10px;background:var(--wood2);clip-path:polygon(0 0,100% 0,0 100%)}
.shf::before{left:12%}.shf::after{right:12%;transform:scaleX(-1)}
.shf.s1{bottom:calc(65.5% - 7px)}.shf.s2{bottom:calc(47.5% - 7px)}
.sideboard{position:absolute;left:60%;width:31%;bottom:var(--floorY);height:38px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--wood) 0 7px,var(--wood2) 7px);box-shadow:0 -1px 0 rgba(255,255,255,.15) inset,0 6px 10px rgba(0,0,0,.35);display:flex;gap:4px;padding:11px 6px 5px}
.sideboard i{flex:1;border-radius:2px;background:rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.sideboard i::after{content:'';display:block;width:4px;height:4px;margin:9px auto 0;border-radius:50%;background:#fde68a}
.obj.on-shelf1,.obj.on-shelf2,.obj.on-table{z-index:1;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.obj.b-wall{filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.screen.deco.furn-hint .shf{box-shadow:0 0 0 2px var(--amber)}
.floor::before{content:'';position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(180deg,rgba(0,0,0,.4),transparent)}

/* ================= ascensor v2: display, torre en corte y tarjeta del piso ================= */
.elev-panel{padding:10px 10px 8px;gap:8px;background:linear-gradient(180deg,#232a3a,#141925);overflow:hidden}
.ev-disp{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:#050409;border:2px solid #334155;box-shadow:inset 0 0 18px rgba(0,0,0,.9)}
.ev-disp>b{font-family:var(--pixel);font-size:26px;color:var(--amber);text-shadow:0 0 12px rgba(251,191,36,.8);letter-spacing:2px}
.ev-arrow{font-size:16px;color:#fb923c;text-shadow:0 0 8px #fb923c;width:16px;text-align:center}
.ev-arrow.go{animation:blinkA .6s infinite}
.ev-disp div{display:flex;flex-direction:column;gap:3px;margin-left:auto;text-align:right;min-width:0}
.ev-disp small{font-family:var(--pixel);font-size:6.5px;color:#94a3b8}
.ev-disp strong{font-family:var(--pixel);font-size:7.5px;color:#fde68a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-main{flex:1;display:grid;grid-template-columns:44% 1fr;gap:8px;min-height:0}
.ev-tower{display:flex;flex-direction:column;min-height:0;border-radius:8px 8px 0 0;background:linear-gradient(90deg,#1c1840,#2a2466 50%,#1c1840);padding:0 6px 0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ev-tower[data-skin="torre"]{background:linear-gradient(90deg,#1e293b,#334155 50%,#1e293b)}.ev-tower[data-skin="rasca"]{background:linear-gradient(90deg,#1c1917,#3b2f15 50%,#1c1917)}.ev-tower[data-skin="nubes"]{background:linear-gradient(90deg,#3b3f78,#6366f1 50%,#3b3f78)}.ev-tower[data-skin="orbital"]{background:linear-gradient(90deg,#062329,#0e3a44 50%,#062329)}
.ev-wsw{display:flex;align-items:center;justify-content:space-between;padding:5px 0 4px}
.ev-wsw button{width:24px;height:22px;border-radius:6px;background:rgba(0,0,0,.4);color:#e2e8f0;font-size:9px}
.ev-wsw button:disabled{opacity:.25}
.ev-wsw small{font-family:var(--pixel);font-size:6.5px;color:#cbd5e1}
.ev-roof{height:6px;margin:0 -6px;background:repeating-linear-gradient(90deg,#fbbf24 0 6px,#111 6px 12px);opacity:.7}
.ev-bands{flex:1;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:2px;padding:3px 0}
.ev-bands::-webkit-scrollbar{display:none}
.tw-b{position:relative;flex-shrink:0;display:flex;align-items:center;gap:6px;padding:0 6px;border-radius:3px;background:linear-gradient(180deg,rgba(253,230,138,.22),rgba(253,230,138,.08));box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);text-align:left}
.tw-b i{font-style:normal;font-family:var(--pixel);font-size:6.5px;color:#e2e8f0;min-width:16px}
.tw-b span{font-size:11px}
.tw-b.locked{background:#0d0b20}.tw-b.locked i{color:#475569}
.tw-b.next{background:repeating-linear-gradient(135deg,#15123a 0 5px,#201c4e 5px 10px);box-shadow:inset 0 0 0 1px rgba(74,222,128,.45)}
.tw-b.sel{box-shadow:inset 0 0 0 2px #fff,0 0 10px rgba(255,255,255,.3);z-index:1}
.tw-b.cur{background:linear-gradient(90deg,rgba(251,191,36,.55),rgba(251,191,36,.15))}
.tw-car{position:absolute;right:3px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:4px;overflow:hidden;background:#fde68a;border:1.5px solid #b45309}
.tw-car .av{width:100%;height:100%}
.ev-lobby{text-align:center;font-family:var(--pixel);font-size:6px;color:#94a3b8;padding:5px 0;border-top:3px solid rgba(0,0,0,.4)}
.ev-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;border-radius:10px;background:radial-gradient(circle at 50% 22%,rgba(253,230,138,.18),transparent 60%),#0f1320;border:1px solid #475569;text-align:center;min-height:0}
.ev-ic{font-size:38px;line-height:1.1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));animation:pop .3s both}
.ev-card small{font-family:var(--pixel);font-size:7px;color:var(--amber)}
.ev-card>b{font-size:14px;line-height:1.2;color:#f8fafc}
.ev-w{font-size:10.5px;color:#94a3b8}
.ev-objs{font-size:15px;line-height:1.4;margin-top:2px;max-height:44px;overflow:hidden}
.ev-objs em{font-style:normal;font-size:10.5px;color:#64748b}
.ev-lock{font-size:11px;color:#cbd5e1;width:100%}.ev-lock b{color:#fde68a}.ev-lock small{display:block;font-family:var(--font);font-size:10.5px;color:#94a3b8}
.ev-bar{height:6px;border-radius:3px;background:#1e293b;overflow:hidden;margin-top:5px}.ev-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--green))}
.ev-card.locked .ev-ic{filter:grayscale(1);opacity:.6}
.ev-go{margin-top:auto;width:100%;padding:10px 6px;border-radius:10px;font-family:var(--pixel);font-size:8px;color:#052e16;background:linear-gradient(135deg,var(--green),#22c55e);box-shadow:0 3px 0 #14532d;animation:pulseG 1.8s infinite}
.ev-go:disabled{background:#1e293b;color:#64748b;box-shadow:none;animation:none}
/* viaje */
.elev-ride{display:grid!important;grid-template-columns:38% 1fr;gap:10px;padding:14px 12px;background:linear-gradient(90deg,var(--ef,#3f3f46),#52525b 50%,var(--ef,#3f3f46));align-items:stretch}
.elev-ride[hidden]{display:none!important}
.rd-shaft{position:relative;border-radius:6px;background:#0b0a18;box-shadow:inset 0 0 20px rgba(0,0,0,.9);overflow:hidden;margin:12px 0}
.rd-cables{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 44%,#475569 44% 46%,transparent 46% 54%,#475569 54% 56%,transparent 56%),repeating-linear-gradient(0deg,transparent 0 22px,rgba(148,163,184,.12) 22px 24px);animation:cables .5s linear infinite}
[data-dir="down"] .rd-cables{animation-direction:reverse}
@keyframes cables{to{background-position:0 0,0 24px}}
.elev-ride.arrived .rd-cables{animation:none}
.rd-tick{position:absolute;left:0;right:0;height:0;border-top:1px dashed rgba(148,163,184,.35);font-style:normal}
.rd-tick b{position:absolute;left:4px;top:-12px;font-family:var(--pixel);font-size:6.5px;color:#94a3b8}
.rd-tick span{position:absolute;right:4px;top:-12px;font-size:10px;opacity:.7}
.rd-car{position:absolute;left:50%;width:42px;height:46px;margin:-23px 0 0 -21px;border-radius:5px;background:linear-gradient(180deg,#fde68a,#f59e0b);border:2px solid #92400e;box-shadow:0 0 16px rgba(251,191,36,.5);padding:4px}
.rd-car::before{content:'';position:absolute;left:50%;top:-40px;width:2px;height:38px;background:#94a3b8}
.rd-face{width:100%;height:100%;border-radius:3px;overflow:hidden;background:#1e1b4b}.rd-face .av{width:100%;height:100%}
.rd-info{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.rd-disp{display:flex;align-items:center;gap:10px;background:#050409;border:2px solid #475569;padding:10px 14px;border-radius:8px;font-family:var(--pixel);color:var(--amber);text-shadow:0 0 10px rgba(251,191,36,.8)}
.rd-disp span{font-size:14px;animation:blinkA .5s infinite}.rd-disp b{font-size:30px;min-width:72px}
.elev-ride.arrived .rd-disp{animation:pop .4s}.elev-ride.arrived .rd-disp span{animation:none}
#rideName{font-family:var(--pixel);font-size:7.5px;color:#e2e8f0;min-height:10px}
.rd-dest{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.35);width:100%}
.rd-dest small{font-family:var(--pixel);font-size:6.5px;color:#94a3b8}.rd-dest b{font-size:14px;color:#fff}.rd-dest em{font-style:normal;font-size:11px;color:#cbd5e1}
.rd-new{font-family:var(--pixel);font-size:8px;color:var(--cyan);animation:blinkA 1s infinite}
.tw-n{font-style:normal;font-size:9.5px;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;padding-right:18px}
.hud{pointer-events:none}
.hud>button{pointer-events:auto;font:inherit;color:inherit;cursor:pointer;transition:transform .12s}
.hud>button:active{transform:scale(.92)}
.hud-xp{position:relative;display:block}
.hud-xp-t{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:6px;color:#fff;text-shadow:1px 1px 0 #000;opacity:.9}
/* hoja "tu progreso" */
.pg-hero{display:grid;grid-template-columns:70px 1fr;gap:12px;align-items:center;padding:12px;border-radius:18px;background:radial-gradient(ellipse at 10% 90%,rgba(124,92,255,.35),transparent 60%),var(--s2);margin-bottom:12px}
.pg-face{width:70px;height:70px;border-radius:50%;overflow:hidden;background:#221f4a;border:2px solid var(--amber)}.pg-face .av{width:100%;height:100%}
.pg-hero small{font-family:var(--pixel);font-size:7px;color:var(--amber)}.pg-hero b{display:block;font-size:18px}
.pg-xp{height:14px;border-radius:4px;background:#1f1d45;overflow:hidden;margin:6px 0 3px;border:1.5px solid rgba(255,255,255,.4)}
.pg-xp i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--green) 0 6px,#22c55e 6px 8px)}
.pg-hero span{font-size:11.5px;color:var(--muted)}
.ex-tiles{display:flex;flex-direction:column;gap:8px}
.ext{display:grid;grid-template-columns:46px 1fr auto;gap:10px;align-items:center;padding:12px;border-radius:16px;background:var(--s2);border:1.5px solid transparent}
.ext.hl{border-color:var(--acc);box-shadow:0 0 18px -6px var(--acc);animation:pop .35s both}
.ext-ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;background:rgba(0,0,0,.3)}
.ext b{font-size:14px}.ext p{font-size:12px;color:var(--muted);line-height:1.45;margin-top:2px}
.ext strong{font-family:var(--mono);font-size:16px;text-align:right}
.ext strong small{display:block;font-size:9.5px;color:var(--dim);font-weight:400}
.ext-xp .ext-ic{color:#86efac}.ext-xp strong{color:#86efac}.ext-bits strong{color:#a5f3fc}.ext-racha strong{color:#fdba74}.ext-rank strong{color:#fde68a}
.earn{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px}
.earn td{padding:7px 4px;border-top:1px solid var(--border)}.earn td:last-child{text-align:right;font-family:var(--mono);color:var(--acc3)}

/* ================= escenas v2: modo enfoque grande, cielos, parallax, posturas ================= */
.fs.big{width:100%;height:var(--stageH,300px);border-radius:26px;-webkit-mask-image:none;mask-image:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 20px 50px rgba(0,0,0,.45)}
.fs.big .fs-char{width:118px;height:197px;margin-left:-59px;bottom:10px}
.fs.big.fs-dog .fs-char,.fs.big.fs-draw .fs-char{margin-left:-95px}
/* cielos */
.sky-day{background:linear-gradient(180deg,#38bdf8,#bae6fd 70%,#dcfce7)}
.sky-day[data-tod="tarde"]{background:linear-gradient(180deg,#7c3aed,#f97316 60%,#fde68a)}
.sky-day[data-tod="noche"]{background:linear-gradient(180deg,#0b1026,#1e1b4b 70%,#312e81)}
.sky-dusk{background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(167,139,250,.45),transparent 70%),linear-gradient(180deg,#1e1b4b,#3b2a6b)}
.sky-dawn{background:linear-gradient(180deg,#fb7185,#fdba74 55%,#fef3c7)}
.sky-night{background:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 70% 20%,#fff,transparent),radial-gradient(1px 1px at 45% 12%,#fff,transparent),radial-gradient(1px 1px at 85% 45%,#fff,transparent),linear-gradient(180deg,#050816,#1e1b4b)}
.sky-room{background:linear-gradient(180deg,#3b2330 0 72%,#6b4428 72%)}
.sky-room[data-tod="dia"]{background:linear-gradient(180deg,#4a2a36 0 72%,#7c4f2c 72%)}
.sky-room::before{content:'';position:absolute;right:8%;top:10%;width:70px;height:56px;border:4px solid #6b4226;border-radius:4px;background:linear-gradient(180deg,#38bdf8,#a5f3fc)}
.sky-room[data-tod="noche"]::before,.sky-room[data-tod="tarde"]::before{background:radial-gradient(circle at 70% 35%,#fef9c3 0 6px,transparent 7px),linear-gradient(180deg,#0b1026,#312e81)}
.sky-gym{background:linear-gradient(180deg,#1f2937 0 74%,#374151 74%)}
.sky-pool{background:linear-gradient(180deg,#e0f2fe,#7dd3fc 45%,#0891b2)}
.sky-stage{background:radial-gradient(ellipse 60% 40% at 50% 100%,rgba(244,114,182,.35),transparent 70%),#0a0718}
/* parallax del parque */
.px{position:absolute;left:0;display:flex;width:max-content;animation:pxMove var(--d,18s) linear infinite}
.px>div{display:flex;justify-content:space-around;width:420px;flex-shrink:0}
.px i{font-style:normal;line-height:1}
@keyframes pxMove{to{transform:translateX(-50%)}}
.px-cloud{top:8%;--d:70s;opacity:.85}.px-cloud i{font-size:30px}.px-cloud>div{width:520px}
.px-hills{position:absolute;left:0;right:0;bottom:18px;height:70px;background:radial-gradient(ellipse 30% 70% at 15% 100%,#86efac,transparent 71%),radial-gradient(ellipse 35% 80% at 55% 100%,#4ade80,transparent 71%),radial-gradient(ellipse 30% 60% at 90% 100%,#86efac,transparent 71%);opacity:.8}
.px-mid{bottom:14px;--d:20s}.px-mid i{font-size:40px}
.px-near{bottom:0;--d:8s;z-index:1}.px-near i{font-size:17px}
.fs-run .px-mid{--d:8s}.fs-run .px-near{--d:3.2s}.fs-run .px-cloud{--d:30s}
.fs-bg{overflow:hidden}
.fx-fly{position:absolute;font-size:18px;animation:flyA 9s ease-in-out infinite}
.fx-fly.f2{animation:flyB 11s ease-in-out infinite;font-size:14px}
@keyframes flyA{0%{left:-8%;top:30%}25%{top:18%}50%{top:34%}75%{top:14%}100%{left:105%;top:28%}}
@keyframes flyB{0%{left:105%;top:22%}30%{top:36%}60%{top:16%}100%{left:-8%;top:30%}}
.fx-heart{position:absolute;left:calc(50% + 40px);bottom:64px;font-size:14px;opacity:0;animation:heart 4s 1s ease-out infinite}
@keyframes heart{0%,60%{opacity:0;transform:translateY(0) scale(.5)}70%{opacity:1;transform:translateY(-8px) scale(1)}100%{opacity:0;transform:translateY(-30px)}}
.fs.big .fx-dog{font-size:48px;left:calc(50% + 20px)}
.fs.big .fx-leash{left:calc(50% - 30px);bottom:44px;width:80px;height:100px}
.fx-speed{position:absolute;inset:0}
.fx-speed i{position:absolute;left:100%;height:2px;width:60px;border-radius:2px;background:rgba(255,255,255,.7);animation:speed .7s linear infinite}
.fx-speed i:nth-child(1){top:30%}.fx-speed i:nth-child(2){top:45%;animation-delay:.25s}.fx-speed i:nth-child(3){top:60%;animation-delay:.5s}
@keyframes speed{to{transform:translateX(-500px)}}
/* posturas sentadas */
.fs.sit .leg{transform:scaleY(.5)}
.fs.sit .fs-char{bottom:0}
.fs.sit-kneel .leg{transform:scaleY(.32)}.fs.sit-kneel .fs-char{bottom:-34px}
.fs.sit-cross .leg-l{transform:rotate(62deg) scaleY(.55)}.fs.sit-cross .leg-r{transform:rotate(-62deg) scaleY(.55)}.fs.sit-cross .fs-char{bottom:-26px}
.fs.big.sit-kneel .fs-char{bottom:-40px}.fs.big.sit-cross .fs-char{bottom:-30px}
/* sillón y lámpara */
.fx-chair-b{position:absolute;left:50%;bottom:26px;width:150px;height:130px;margin-left:-75px;border-radius:40px 40px 10px 10px;background:linear-gradient(180deg,#9333ea,#6b21a8);box-shadow:inset 0 -10px 20px rgba(0,0,0,.3)}
.fx-chair-f{position:absolute;left:50%;bottom:0;width:176px;height:62px;margin-left:-88px;border-radius:14px 14px 6px 6px;background:linear-gradient(180deg,#a855f7,#7e22ce);box-shadow:inset 0 4px 0 rgba(255,255,255,.2),0 8px 16px rgba(0,0,0,.4)}
.fx-chair-f i{position:absolute;bottom:14px;width:30px;height:74px;border-radius:15px;background:linear-gradient(180deg,#c084fc,#7e22ce)}
.fx-chair-f i:first-child{left:-4px}.fx-chair-f i:last-child{right:-4px}
.fs.big .fx-chair-b{width:190px;height:170px;margin-left:-95px}.fs.big .fx-chair-f{width:220px;height:78px;margin-left:-110px}.fs.big .fx-chair-f i{height:92px;width:36px}
.fx-lamp{position:absolute;left:12%;bottom:20px;width:4px;height:120px;background:#78716c}
.fx-lamp::before{content:'';position:absolute;left:-18px;top:-10px;width:40px;height:24px;border-radius:20px 20px 4px 4px;background:linear-gradient(180deg,#fde68a,#f59e0b);box-shadow:0 20px 60px 30px rgba(253,230,138,.25)}
.fx-lamp.r{left:auto;right:10%}
.fx-pagefly{position:absolute;left:55%;top:38%;font-size:16px;opacity:0;animation:pageAway 6s 2s ease-out infinite}
@keyframes pageAway{0%,80%{opacity:0;transform:none}85%{opacity:1}100%{opacity:0;transform:translate(60px,-60px) rotate(90deg)}}
.fx-cat{position:absolute;left:4%;bottom:4px;z-index:2;font-size:30px;animation:catBreath 3s ease-in-out infinite}
@keyframes catBreath{50%{transform:scale(1.05,.96)}}
/* escritorio */
.fx-desk2{position:absolute;left:50%;bottom:0;width:230px;height:66px;margin-left:-115px;border-top:8px solid #a16207;background:linear-gradient(180deg,#78350f,#451a03);box-shadow:0 -2px 10px rgba(0,0,0,.4)}
.fs.big .fx-desk2{width:280px;margin-left:-140px;height:82px}
.fx-desk2 span{position:absolute;bottom:100%;font-size:28px}
.fx-books{left:8px}.fx-open{left:50%;margin-left:-16px}.fx-cup{right:12px;font-size:22px!important}
.fx-cup::after{content:'~';position:absolute;left:30%;top:-16px;font-size:16px;color:#e5e7eb;animation:flUp 2.5s infinite}
.fx-paper{position:absolute;left:50%;bottom:100%;width:66px;height:34px;margin-left:-33px;margin-bottom:-4px;background:#f8fafc;border-radius:2px;padding:5px 6px;display:flex;flex-direction:column;gap:4px;transform:perspective(80px) rotateX(35deg)}
.fx-paper i{height:2px;background:#6366f1;width:calc(var(--p,0) * 500% - var(--k,0) * 100%);max-width:100%;min-width:0}
.fx-paper i:nth-child(1){--k:0}.fx-paper i:nth-child(2){--k:1}.fx-paper i:nth-child(3){--k:2}.fx-paper i:nth-child(4){--k:3}.fx-paper i:nth-child(5){--k:4}
.fx-mon{position:absolute;left:50%;bottom:100%;width:92px;height:58px;margin-left:-46px;margin-bottom:-2px;border:4px solid #1f2937;border-radius:5px;background:#0b1220;padding:5px;overflow:hidden;display:flex;flex-direction:column;gap:4px;box-shadow:0 0 20px rgba(34,211,238,.35)}
.fx-mon i{height:3px;border-radius:2px;background:#22d3ee;animation:code 3s linear infinite}
.fx-mon i:nth-child(2n){width:60%;background:#a78bfa}.fx-mon i:nth-child(3n){width:80%;background:#4ade80}
@keyframes code{from{transform:translateY(40px)}to{transform:translateY(-40px)}}
.fs-study .arm-r,.fs-write .arm-r{animation:scribble .5s ease-in-out infinite alternate}
.fs-study .arm-l,.fs-write .arm-l,.fs-type .arm-l{transform:rotate(-24deg)}
.fs-study .av-head,.fs-write .av-head{transform-box:view-box;transform-origin:60px 62px;transform:rotate(4deg) translateY(2px)}
.fs.sit.fs-type .fs-char,.fs.sit.fs-study .fs-char,.fs.sit.fs-write .fs-char{bottom:18px}
/* orar */
.fx-rays{position:absolute;left:50%;top:-60%;width:420px;height:420px;margin-left:-210px;background:repeating-conic-gradient(from 0deg,rgba(253,230,138,.16) 0 8deg,transparent 8deg 22deg);-webkit-mask-image:radial-gradient(circle,#000 10%,transparent 60%);mask-image:radial-gradient(circle,#000 10%,transparent 60%);animation:spin 40s linear infinite}
.fx-dove{position:absolute;top:14%;font-size:24px;animation:dove 12s ease-in-out infinite}
@keyframes dove{0%{left:-12%;transform:translateY(0)}50%{transform:translateY(-14px)}100%{left:110%;transform:translateY(6px)}}
.fx-candle{position:absolute;bottom:14px;font-size:28px;animation:flicker 1.2s ease-in-out infinite alternate}
.fx-candle.l{left:12%}.fx-candle.r{right:26%;animation-delay:.4s}
@keyframes flicker{from{filter:drop-shadow(0 0 6px #fde68a)}to{filter:drop-shadow(0 0 16px #fbbf24);transform:scale(1.04)}}
.fx-word{position:absolute;bottom:20%;left:var(--x);font-style:normal;font:italic 600 13px var(--font);color:#fde68a;opacity:0;animation:word 10s calc(var(--i) * 2s) ease-out infinite}
@keyframes word{0%{opacity:0;transform:translateY(10px)}15%{opacity:.9}60%{opacity:.7}100%{opacity:0;transform:translateY(-110px)}}
.fs-pray .av-head{transform-box:view-box;transform-origin:60px 62px;animation:lookUp 8s ease-in-out infinite}
@keyframes lookUp{0%,100%{transform:rotate(0)}40%,60%{transform:translateY(-2px) rotate(-3deg)}}
.fx-cushion{position:absolute;left:50%;bottom:4px;width:130px;height:22px;margin-left:-65px;border-radius:12px;background:linear-gradient(180deg,#8b5cf6,#5b21b6);box-shadow:0 6px 12px rgba(0,0,0,.35)}
/* meditar */
.fx-orbit{position:absolute;left:50%;top:45%;width:180px;height:180px;margin:-90px;animation:spin 14s linear infinite}
.fx-orbit i{position:absolute;font-style:normal;color:#c4b5fd;font-size:16px}
.fx-orbit i:nth-child(1){left:50%;top:0}.fx-orbit i:nth-child(2){right:0;top:60%}.fx-orbit i:nth-child(3){left:6%;top:70%;font-size:24px}
.fs.big .fx-breath{width:230px;height:230px;margin:-115px}
/* yoga, dormir */
.fx-sun{position:absolute;left:50%;top:14%;width:90px;height:90px;margin-left:-45px;border-radius:50%;background:radial-gradient(circle,#fff7ed,#fdba74 60%,transparent 70%)}
.fx-moon{position:absolute;right:14%;top:12%;width:44px;height:44px;border-radius:50%;box-shadow:-10px 6px 0 0 #fef9c3}
/* ejercicio: la rutina cambia sola */
.fx-rack{position:absolute;left:0;right:0;top:18%;text-align:center;font-size:26px;letter-spacing:40px;opacity:.35}
.fs-flex[data-move="press"] .arm-l{animation:pressL 1.6s ease-in-out infinite}
.fs-flex[data-move="press"] .arm-r{animation:pressR 1.6s .8s ease-in-out infinite}
.fs-flex[data-move="squat"] .av{animation:squatD 1.6s ease-in-out infinite}
.fs-flex[data-move="squat"] .arm-l{animation:none;transform:rotate(-80deg)}.fs-flex[data-move="squat"] .arm-r{animation:none;transform:rotate(80deg)}
@keyframes squatD{0%,100%{transform:none}50%{transform:translateY(22px) scaleY(.86)}}
.fs-flex[data-move="squat"] .leg{animation:squatL 1.6s ease-in-out infinite}
@keyframes squatL{50%{transform:scaleY(.72)}}
.fs-flex[data-move="jacks"] .arm-l{animation:jackAL .8s ease-in-out infinite}.fs-flex[data-move="jacks"] .arm-r{animation:jackAR .8s ease-in-out infinite}
.fs-flex[data-move="jacks"] .leg-l{animation:jackLL .8s ease-in-out infinite}.fs-flex[data-move="jacks"] .leg-r{animation:jackLR .8s ease-in-out infinite}
.fs-flex[data-move="jacks"] .av{animation:jackB .8s ease-in-out infinite}
@keyframes jackAL{50%{transform:rotate(160deg)}}@keyframes jackAR{50%{transform:rotate(-160deg)}}
@keyframes jackLL{50%{transform:rotate(16deg)}}@keyframes jackLR{50%{transform:rotate(-16deg)}}
@keyframes jackB{50%{transform:translateY(-10px)}}
.fs-flex[data-move="curl"] .arm-l{animation:curlL 1.2s ease-in-out infinite}.fs-flex[data-move="curl"] .arm-r{animation:curlR 1.2s .6s ease-in-out infinite}
@keyframes curlL{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(-70deg)}}@keyframes curlR{0%,100%{transform:rotate(6deg)}50%{transform:rotate(70deg)}}
/* nadar */
.px-fish{bottom:24px;--d:14s;z-index:4}.px-fish i{font-size:22px;transform:scaleX(-1)}
.fx-lane{position:absolute;left:0;right:0;bottom:70px;height:4px;background:repeating-linear-gradient(90deg,#f43f5e 0 10px,#fff 10px 20px);opacity:.8}
.fs-swim .fx-fl{color:#e0f2fe}
/* cocinar, comer */
.fx-stove{position:absolute;left:50%;bottom:0;width:200px;height:48px;margin-left:-100px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#e5e7eb,#9ca3af);box-shadow:0 -2px 8px rgba(0,0,0,.3)}
.fx-fire{position:absolute;left:24%;bottom:40px;font-size:20px;animation:flicker .4s infinite alternate}
.fx-pot{position:absolute;right:18%;bottom:40px;font-size:30px}
.fx-table em{position:absolute;right:18%;top:-26px;font-style:normal;font-size:22px}
/* limpiar: brilla más con el progreso */
.fx-shine{position:absolute;inset:0;opacity:var(--p,0)}
.fx-shine i{position:absolute;font-style:normal;font-size:14px;animation:twinkle 2s infinite}
.fx-shine i:nth-child(1){left:12%;top:30%}.fx-shine i:nth-child(2){left:80%;top:22%;animation-delay:.3s}.fx-shine i:nth-child(3){left:22%;top:66%;animation-delay:.6s}.fx-shine i:nth-child(4){left:70%;top:60%;animation-delay:.9s}.fx-shine i:nth-child(5){left:45%;top:14%;animation-delay:1.2s}.fx-shine i:nth-child(6){left:88%;top:74%;animation-delay:1.5s}
/* música */
.fx-spot{position:absolute;top:-10%;width:120px;height:130%;background:linear-gradient(180deg,rgba(244,114,182,.35),transparent 80%);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);animation:spot 4s ease-in-out infinite alternate;transform-origin:top center}
.fx-spot.l{left:5%}.fx-spot.r{right:5%;background:linear-gradient(180deg,rgba(34,211,238,.35),transparent 80%);animation-delay:-2s}
@keyframes spot{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.fx-eq{position:absolute;left:50%;bottom:0;width:200px;margin-left:-100px;height:34px;display:flex;align-items:flex-end;gap:4px}
.fx-eq i{flex:1;background:linear-gradient(180deg,#f472b6,#7c3aed);border-radius:2px 2px 0 0;animation:eq .5s ease-in-out infinite alternate}
.fx-eq i:nth-child(2n){animation-delay:.15s}.fx-eq i:nth-child(3n){animation-delay:.3s;animation-duration:.4s}
@keyframes eq{from{height:20%}to{height:100%}}
/* dibujar: el cuadro se pinta con tu progreso */
.fs.big .fx-easel{width:92px;height:104px}
.fs.big .fx-easel i{animation:none;clip-path:inset(0 calc((1 - var(--p,0)) * 100%) 0 0)}
/* arbolito y contador */
.fx-count{position:absolute;left:12px;top:12px;z-index:5;padding:6px 11px;border-radius:20px;background:rgba(7,6,16,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:700 12px var(--mono);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.fx-count:empty{display:none}
.fx-grow{position:absolute;right:12px;bottom:10px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:0}
.fx-grow b{font-size:34px;line-height:1.1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.fx-grow b.pop{animation:growPop .8s cubic-bezier(.22,1.6,.36,1)}
@keyframes growPop{0%{transform:scale(.3) translateY(10px)}100%{transform:none}}
.fx-grow small{font:600 8.5px var(--font);color:#fff;background:rgba(7,6,16,.55);padding:2px 6px;border-radius:8px;white-space:nowrap}
/* modo enfoque v2: escenario grande + coach */
.fc-stage{width:100%;max-width:520px;--stageH:clamp(210px,35vh,360px)}
.fc-act{margin-bottom:6px}
.fc-coach{position:relative;margin:12px auto 0;max-width:460px;padding:12px 16px;border-radius:18px;background:rgba(24,22,52,.92);border:1.5px solid var(--bh);text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.fc-coach::before{content:'';position:absolute;left:50%;top:-9px;width:16px;height:16px;margin-left:-8px;background:inherit;border-left:1.5px solid var(--bh);border-top:1.5px solid var(--bh);transform:rotate(45deg)}
.fc-coach p{font-size:16px;font-weight:700;line-height:1.35;color:#f5f3ff;min-height:22px}
.fc-coach.hot{border-color:var(--amber);background:linear-gradient(135deg,rgba(251,191,36,.22),rgba(124,92,255,.22)),#18163a;box-shadow:0 0 30px -6px rgba(251,191,36,.6)}
.fc-coach.hot::before{border-color:var(--amber)}
.fc-coach.hot p{font-size:17.5px;color:#fff}
.fc-coach.count p{font:400 34px var(--pixel);color:var(--amber);text-shadow:0 0 18px rgba(251,191,36,.8)}
.fc-coach.pop{animation:coachPop .5s cubic-bezier(.22,1.6,.36,1)}
@keyframes coachPop{0%{transform:scale(.85);opacity:.3}100%{transform:none;opacity:1}}
.focus{gap:8px}
.fc-ring{flex-shrink:0}
.fc-time{font-size:clamp(38px,11vw,54px)}
@media (max-height:720px){.fc-stage{--stageH:clamp(190px,32vh,300px)}.fc-coach p{font-size:14.5px}.fc-bin{display:none}}
/* ================= pop: logo arcoíris, racha estilo Duolingo ================= */
@keyframes logoHue{to{background-position:300% 0}}
.lf{background:linear-gradient(90deg,#a78bfa,#22d3ee,#4ade80,#fbbf24,#f472b6,#a78bfa);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;animation:logoHue 6s linear infinite}
.bz-io{font-size:10px;background:linear-gradient(90deg,#a78bfa,#22d3ee,#4ade80,#fbbf24,#f472b6,#a78bfa);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:logoHue 5s linear infinite;filter:drop-shadow(0 0 4px rgba(167,139,250,.5))}
.console{background-size:100% 100%}
.bezel{position:relative}
.bezel::after{content:'';position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:linear-gradient(90deg,#a78bfa,#22d3ee,#4ade80,#fbbf24,#f472b6,#a78bfa);background-size:300% 100%;animation:logoHue 8s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;pointer-events:none}
.streak-ov{position:fixed;inset:0;z-index:940;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 50% 38%,rgba(249,115,22,.45),rgba(7,6,15,.95) 62%);animation:fu .25s both}
.so-in{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;max-width:340px;width:100%}
.so-flame{font-size:110px;line-height:1;animation:flame 1.2s ease-in-out infinite alternate,pop .6s cubic-bezier(.22,1.6,.36,1);filter:drop-shadow(0 0 30px rgba(251,146,60,.9))}
@keyframes flame{from{transform:scale(1) rotate(-3deg)}to{transform:scale(1.08,1.12) rotate(3deg)}}
.so-n{font-family:var(--pixel);font-size:54px;color:#fdba74;text-shadow:4px 4px 0 #7c2d12}
.so-n.bump{animation:pop .6s cubic-bezier(.22,1.6,.36,1)}
.so-l{font-family:var(--pixel);font-size:10px;color:#fed7aa;letter-spacing:1px}
.so-week{display:flex;gap:8px;margin:14px 0 6px}
.so-week div{display:flex;flex-direction:column;align-items:center;gap:4px}
.so-week i{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.15);color:#fff}
.so-week .on i{background:linear-gradient(135deg,#fb923c,#f97316);border-color:#fdba74;box-shadow:0 0 12px rgba(251,146,60,.6)}
.so-week .today i{outline:2px solid #fff;outline-offset:2px}
.so-week small{font-family:var(--pixel);font-size:7px;color:#fed7aa}
.so-in p{font-size:15px;color:#ffedd5;line-height:1.45}
.so-in .btn-acc{margin-top:10px;background:linear-gradient(135deg,#fb923c,#f97316)}

/* ================= modo enfoque v3: el reloj vive dentro de un Game Boy ================= */
.focus{justify-content:flex-start;padding:calc(10px + env(safe-area-inset-top,0px)) 10px calc(10px + var(--safe-b));background:radial-gradient(ellipse 90% 40% at 50% 0%,rgba(167,139,250,.25),transparent 70%),linear-gradient(180deg,#2c2166 0,#1d1650 58%,#110c30 82%,#07060f 100%)}
.focus .fc-rain{opacity:.16}
.fgb{position:relative;z-index:1;width:100%;max-width:480px;height:100%;display:flex;flex-direction:column;gap:8px;margin:0 auto}
.fgb-top{display:flex;align-items:center;gap:10px;padding:2px 6px}
.fgb-top .led{flex-shrink:0}
.fgb-top .fc-emoji{font-size:26px}
.fgb-top div{flex:1;min-width:0}
.fgb-top b{display:block;font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fgb-top small{font-size:11.5px;color:#b6aee8}
.fgb-radio{width:40px;height:40px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.12);font-size:20px;flex-shrink:0}
.fgb-radio.on{background:rgba(74,222,128,.2);border-color:var(--green);box-shadow:0 0 14px rgba(74,222,128,.4)}
.fgb-bezel{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;background:#0b0a18;border-radius:18px 18px 36px 18px;padding:9px 9px 6px;box-shadow:inset 0 2px 8px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.08),0 16px 40px rgba(0,0,0,.45)}
.fgb-bezel::after{content:'';position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:linear-gradient(90deg,#a78bfa,#22d3ee,#4ade80,#fbbf24,#f472b6,#a78bfa);background-size:300% 100%;animation:logoHue 8s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;pointer-events:none}
.fgb-screen{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;background:#0e0c24}
.fgb-screen::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:9;background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.fc-clock{position:relative;flex-shrink:0;height:clamp(128px,21vh,190px);background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(124,92,255,.22),transparent 70%),linear-gradient(180deg,#0b0a1f,#141035)}
.fc-clock canvas{position:absolute;inset:0}
.fc-clock .fc-center{gap:2px}
.fc-clock .fc-time{font-size:clamp(34px,10vw,50px);line-height:1}
.fc-clock .fc-bin{font-size:10.5px;letter-spacing:1.5px}
.fgb-screen .fs.big{flex:1;min-height:0;height:auto;border-radius:0;box-shadow:none}
.fgb .bezel-label{padding:7px 4px 1px;font-size:7px}
.fgb-who{margin-left:auto;font-family:var(--pixel);font-size:6.5px;color:#8f86c9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62%}
.fgb-lower{position:relative;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 4px 4px;-webkit-mask-image:linear-gradient(180deg,#000 75%,rgba(0,0,0,.85));mask-image:linear-gradient(180deg,#000 75%,rgba(0,0,0,.85))}
.ghost-pad,.ghost-ab{position:absolute;top:18px;opacity:.1;pointer-events:none}
.ghost-pad{left:8px;width:96px;height:96px}
.ghost-pad i{position:absolute;background:#c4b5fd;border-radius:6px}
.ghost-pad i:first-child{left:32px;top:0;width:32px;height:96px}.ghost-pad i:last-child{left:0;top:32px;width:96px;height:32px}
.ghost-ab{right:8px;display:flex;gap:10px;transform:rotate(-20deg)}
.ghost-ab i{width:46px;height:46px;border-radius:50%;background:#f9a8d4}.ghost-ab i:first-child{margin-top:26px;background:#c4b5fd}
.fgb-lower .fc-coach{margin:0;width:100%;max-width:420px;z-index:1}
.fgb-lower .fc-coach::before{display:none}
.fgb-lower .fc-prize{z-index:1}
.fc-pause{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--pixel);font-size:7px;color:#8f86c9;letter-spacing:.5px;padding:4px 18px;border:0;background:none;border-radius:0}
.fc-pause i{width:46px;height:12px;border-radius:7px;background:#0f0d24;box-shadow:0 2px 0 rgba(0,0,0,.5);transform:rotate(-18deg)}
.fc-pause:active i{background:#2a2360}
@media (max-height:720px){.fc-clock{height:118px}.fgb-lower .fc-coach p{font-size:14px}.ghost-pad,.ghost-ab{display:none}}
.scene.radio-on .obj[data-item="radio"] .spr{animation:radioBop .45s ease-in-out infinite alternate}
.scene.radio-on .obj[data-item="radio"]::after{content:'♪ ♫';position:absolute;left:60%;top:-14px;font:700 12px var(--mono);color:#f9a8d4;animation:flUp 1.6s ease-out infinite;white-space:nowrap}
@keyframes radioBop{to{transform:scale(1.08) rotate(-3deg)}}
.rst{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.rst button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px;border-radius:12px;background:#141330;border:1px solid var(--border)}
.rst span{font-size:20px}.rst b{font-size:10.5px}.rst small{font-size:9px;color:var(--dim)}
.rst button.on{border-color:var(--green);background:rgba(74,222,128,.12);box-shadow:0 0 12px -4px var(--green)}
.rst button.on span{animation:radioBop .45s ease-in-out infinite alternate}
.rst button.locked{opacity:.4}
.radio-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:12.5px}
.radio-row input[type=range]{accent-color:var(--acc);width:110px;vertical-align:middle}
.radio-card.locked{opacity:.7}
a.list-row{color:inherit;text-decoration:none}
.story-prev{display:flex;justify-content:center;margin-bottom:12px}
.story-prev img{width:min(100%,300px);border-radius:18px;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.so-share{margin-top:6px;font-size:13px;font-weight:600;color:#fed7aa;padding:10px}
.seg{display:flex;gap:4px;background:var(--s2);border-radius:12px;padding:3px}
.seg button{flex:1;padding:9px 6px;border-radius:9px;font-size:13px;font-weight:600;color:var(--muted)}
.seg button.on{background:var(--s4);color:#fff}
/* compañero */
.petc{position:absolute;bottom:calc(var(--floorY) - 6px);left:30%;z-index:5;transform:translateX(-50%) scale(var(--ps,1));transform-origin:bottom center;transition:left .9s cubic-bezier(.3,.7,.3,1);font-size:30px;line-height:1;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.pet-e{display:inline-block;animation:petHop 1.4s ease-in-out infinite}
.petc.flip .pet-e{transform:scaleX(-1)}
.petc.egg .pet-e{animation:eggRock 2.4s ease-in-out infinite;transform-origin:bottom center}
@keyframes eggRock{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-12deg)}82%{transform:rotate(10deg)}88%{transform:rotate(-6deg)}}
@keyframes petHop{0%,100%{translate:0 0}50%{translate:0 -5px}}
.petc[data-mood="triste"] .pet-e{animation:none;filter:saturate(.5)}
.pet-b{position:absolute;left:70%;top:-14px;font-size:12px;animation:flUp 2.6s ease-out infinite}
.petc.hop .pet-e{animation:actJump .9s cubic-bezier(.22,1,.36,1)}
.screen.deco .petc{opacity:.3}
.fx-pet{position:absolute;left:calc(50% - 96px);bottom:8px;z-index:3;font-size:34px;transform:scale(var(--ps,1));transform-origin:bottom center;animation:petCheer 1s ease-in-out infinite;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.fx-pet.egg{animation:eggRock 2.4s ease-in-out infinite}
@keyframes petCheer{0%,100%{translate:0 0}50%{translate:0 -10px}}
.fs-dog .fx-pet,.fs-draw .fx-pet{left:auto;right:70px}
.pet-row{display:grid;grid-template-columns:80px 1fr;gap:12px;align-items:center}
.pet-big{font-size:60px;text-align:center;animation:petHop 1.4s ease-in-out infinite}
.pet-big.egg{animation:eggRock 2.4s ease-in-out infinite}
.pet-big.mood-triste{filter:saturate(.5);animation:none}
.pet-chain{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.pet-chain i{font-style:normal;font-size:20px;opacity:.35}.pet-chain i.on{opacity:1}.pet-chain b{color:var(--dim);font-size:11px}
.pet-row small{display:block;font-size:11.5px;color:var(--muted);margin:3px 0}
/* social */
.rk{cursor:pointer}.rk:active{transform:scale(.98)}
.rk.z-up{box-shadow:inset 3px 0 0 var(--green)}.rk.z-down{box-shadow:inset 3px 0 0 var(--red)}
.pd{cursor:pointer}
.lg-card{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center;margin:10px 0;padding:12px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--lc) 22%,transparent),#141330);border:1px solid color-mix(in srgb,var(--lc) 55%,transparent)}
.lg-ic{font-size:36px;text-align:center}
.lg-card b{font-size:15px}.lg-card small{display:block;font-size:11px;color:var(--muted);margin-top:2px}.lg-card small b{font-size:11px;color:#fff}
.lg-ladder{grid-column:1/-1;display:flex;justify-content:space-between;padding-top:6px}
.lg-ladder i{font-style:normal;font-size:16px;opacity:.3;filter:grayscale(1)}.lg-ladder i.past{opacity:.6;filter:none}.lg-ladder i.on{opacity:1;filter:none;transform:scale(1.35)}
.tg-code{display:flex;gap:8px;align-items:center}.tg-code b{font-family:var(--pixel);font-size:14px;color:var(--amber);letter-spacing:2px;flex:1}.tg-code .btn-ghost{width:auto;padding:10px 12px}
.tg-card .row{align-items:center}.tg-card .row .btn-acc{width:auto;padding:11px 14px;white-space:nowrap}
.vroom{position:relative;height:210px;border-radius:16px;overflow:hidden;margin:0 -4px 12px;--wall:#3b2330;--wall2:#4a2a36;--floorA:#6b4428;--wood:#8b5a2b;--wood2:#5b3a1e}
.vroom[data-skin="torre"]{--wall:#1f2a44;--wall2:#27365c;--floorA:#8b7355;--wood:#94a3b8;--wood2:#475569}
.vroom[data-skin="rasca"]{--wall:#0f172a;--wall2:#1e1b4b;--floorA:#1f2937;--wood:#d4a24c;--wood2:#7c5a1c}
.vroom[data-skin="nubes"]{--wall:#e0e7ff;--wall2:#c7d2fe;--floorA:#e2e8f0;--wood:#f8fafc;--wood2:#a5b4fc}
.vroom[data-skin="orbital"]{--wall:#0b1020;--wall2:#111a33;--floorA:#1e293b;--wood:#1e293b;--wood2:#22d3ee}
.vr-wall{position:absolute;inset:0 0 14% 0;background:linear-gradient(180deg,var(--wall),var(--wall2))}
.vr-floor{position:absolute;left:0;right:0;bottom:0;height:14%;background:repeating-linear-gradient(90deg,var(--floorA) 0 28px,rgba(0,0,0,.25) 28px 30px)}
.vr-win{position:absolute;right:10%;top:10%;width:62px;height:46px;border:3px solid var(--wood2);border-radius:4px;background:linear-gradient(180deg,#38bdf8,#a5f3fc)}
.vroom.open .vr-wall{background:linear-gradient(180deg,#38bdf8,#bae6fd)}.vroom.open .vr-win{display:none}
.vr-shf{position:absolute;left:28%;width:22%;height:5px;background:var(--wood);box-shadow:0 3px 4px rgba(0,0,0,.4)}.vr-shf.s1{bottom:calc(64% - 5px)}.vr-shf.s2{bottom:calc(47% - 5px)}
.vr-sb{position:absolute;left:60%;width:30%;bottom:14%;height:24px;background:linear-gradient(180deg,var(--wood) 0 5px,var(--wood2) 5px);border-radius:2px 2px 0 0}
.vr-it{position:absolute;transform:translateX(-50%);line-height:1;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.vr-av{position:absolute;left:50%;bottom:9%;width:64px;height:107px;margin-left:-32px}.vr-av .av{width:100%;height:100%;overflow:visible}
.vr-pet{position:absolute;left:calc(50% - 50px);bottom:12%;font-size:24px;animation:petHop 1.4s ease-in-out infinite}
.vr-tag{position:absolute;left:8px;top:8px;font-family:var(--pixel);font-size:7px;color:#fff;background:rgba(0,0,0,.55);padding:4px 6px;border-radius:4px}
.vs-info{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.vs-info div{background:var(--s2);border-radius:10px;padding:8px 4px;text-align:center}.vs-info small{display:block;font-size:9.5px;color:var(--dim)}.vs-info b{font-size:12.5px}
.vs-likes{text-align:center;font-size:13px;color:var(--muted);margin-bottom:10px}.vs-likes span{font-weight:700;color:#f9a8d4}
.fc-buddies{position:absolute;right:8px;top:calc(clamp(128px,21vh,190px) + 8px);z-index:6;display:flex;flex-direction:column;gap:5px;max-width:48%}
.bud{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;border-radius:14px;background:rgba(7,6,16,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 0 0 1px rgba(255,255,255,.12);animation:pop .3s both}
.bud-f{width:26px;height:26px;border-radius:50%;overflow:hidden;background:#221f4a;flex-shrink:0}.bud-f .av{width:100%;height:100%}
.bud b{display:block;font-size:10.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bud small{display:block;font-size:9px;color:#c4b5fd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bud.paused{opacity:.55}
.fs.big .fx-count{max-width:50%}
@media (max-height:720px){.fc-buddies{top:126px}}
.season{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;text-align:left;padding:12px;border-radius:16px;margin-bottom:12px;background:linear-gradient(120deg,#9d174d,#7c3aed 60%,#1e1b4b);border:1.5px solid #f9a8d4;box-shadow:0 0 22px -8px #f472b6;position:relative;overflow:hidden}
.season::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);animation:shine 3.5s infinite}
.ss-e{font-size:28px;letter-spacing:2px;animation:floaty 3s ease-in-out infinite}
.season b{font-size:14px;display:block}.season small{font-size:11px;color:#fbcfe8}
.season em{font-style:normal;font-family:var(--pixel);font-size:7px;background:#fde68a;color:#1c1204;padding:5px 6px;border-radius:5px;animation:pulseP 1.8s infinite}
.si-new.ltd{background:#f59e0b;color:#1c1204}
/* clima en la ventana */
.wx{position:absolute;inset:0;z-index:4;pointer-events:none;display:none}
[data-weather="lluvia"] .wx,[data-weather="tormenta"] .wx{display:block;background:repeating-linear-gradient(100deg,transparent 0 7px,rgba(191,219,254,.7) 7px 8px,transparent 8px 15px);background-size:30px 30px;animation:rainFall .45s linear infinite}
@keyframes rainFall{to{background-position:-6px 30px}}
[data-weather="lluvia"] .win,[data-weather="tormenta"] .win{filter:saturate(.6) brightness(.8)}
[data-weather="tormenta"] .win{animation:storm 7s infinite}
@keyframes storm{0%,92%,96%,100%{filter:saturate(.5) brightness(.7)}93%,95%{filter:brightness(2)}}
[data-weather="nieve"] .wx{display:block;background-image:radial-gradient(2px 2px at 20% 10%,#fff,transparent),radial-gradient(2px 2px at 60% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 80% 60%,#fff,transparent),radial-gradient(2px 2px at 35% 70%,#fff,transparent);background-size:40px 40px;animation:snowFall 3s linear infinite}
@keyframes snowFall{to{background-position:8px 40px}}
[data-weather="nubes"] .wx,[data-weather="niebla"] .wx{display:block;background:radial-gradient(ellipse 50% 30% at 30% 30%,rgba(226,232,240,.85),transparent 70%),radial-gradient(ellipse 45% 25% at 75% 45%,rgba(203,213,225,.8),transparent 70%)}
[data-weather="niebla"] .wx{background:linear-gradient(180deg,rgba(226,232,240,.5),rgba(226,232,240,.8))}
[data-weather="nubes"] .sun,[data-weather="lluvia"] .sun,[data-weather="tormenta"] .sun,[data-weather="niebla"] .sun{opacity:.25}
.wx-tag{position:absolute;top:52px;left:8px;z-index:12;font-family:var(--pixel);font-size:7px;color:#fff;background:rgba(0,0,0,.5);padding:4px 6px;border-radius:3px}
.mood-card{margin-bottom:10px;padding:12px;border-radius:16px;background:linear-gradient(135deg,rgba(244,114,182,.16),rgba(124,92,255,.14));border:1px solid rgba(244,114,182,.4);animation:pop .3s both}
.mood-card b{display:block;font-size:13.5px;margin-bottom:8px}
.mood-row{display:flex;justify-content:space-between;gap:4px;margin-bottom:8px}
.mood-row button{flex:1;font-size:26px;padding:6px 0;border-radius:12px;background:rgba(0,0,0,.25);transition:transform .12s}
.mood-row button:active{transform:scale(1.25)}
.mood-skip{font-size:11.5px;color:var(--dim);margin-top:6px}
.coach-card{margin-bottom:14px;padding:12px;border-radius:16px;background:linear-gradient(135deg,rgba(34,211,238,.12),rgba(124,92,255,.14));border:1px solid rgba(34,211,238,.35)}
.tip{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:8px 0;border-top:1px dashed rgba(167,139,250,.16)}
.tip span{font-size:20px;text-align:center}.tip b{display:block;font-size:12.5px}.tip small{font-size:11px;color:var(--muted);line-height:1.4}
.tip button{font-size:11.5px;font-weight:700;padding:8px 10px;border-radius:10px;background:var(--acc);color:#fff;white-space:nowrap}
.mg-bar.mood i{background:linear-gradient(90deg,#f472b6,#fbbf24)}
.diary{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.diary div{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:12px;background:#141330}
.diary span{font-size:18px}.diary p{font-size:12.5px;line-height:1.4}.diary small{display:block;font-size:10px;color:var(--dim)}
/* temas de la consola */
.themes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.themes button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border-radius:12px;background:#141330;border:1px solid var(--border)}
.themes i{width:34px;height:22px;border-radius:7px;background:linear-gradient(160deg,color-mix(in srgb,var(--tc) 70%,#fff),var(--tc));box-shadow:inset 0 2px 0 rgba(255,255,255,.3)}
.themes b{font-size:10.5px}.themes small{font-size:9px;color:var(--dim)}
.themes button.on{border-color:var(--amber);box-shadow:0 0 12px -4px var(--amber)}.themes button.locked{opacity:.4}
body[data-gb="menta"] .console,body[data-gb="menta"] .focus{background:linear-gradient(180deg,#14b8a6 0,#0f766e 360px,#115e59 700px,rgba(17,94,89,.5) calc(100% - 160px),rgba(9,9,15,0) 100%)}
body[data-gb="sandia"] .console,body[data-gb="sandia"] .focus{background:linear-gradient(180deg,#f43f5e 0,#be123c 360px,#881337 700px,rgba(136,19,55,.5) calc(100% - 160px),rgba(9,9,15,0) 100%)}
body[data-gb="atomico"] .console,body[data-gb="atomico"] .focus{background:linear-gradient(180deg,rgba(167,139,250,.55) 0,rgba(109,40,217,.45) 360px,rgba(76,29,149,.4) 700px,rgba(9,9,15,0) 100%),repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 2px,transparent 2px 8px)}
body[data-gb="noche"] .console,body[data-gb="noche"] .focus{background:linear-gradient(180deg,#1e293b 0,#0f172a 360px,#020617 700px,rgba(2,6,23,.5) calc(100% - 160px),rgba(9,9,15,0) 100%)}
body[data-gb="oro"] .console,body[data-gb="oro"] .focus{background:linear-gradient(180deg,#fbbf24 0,#b45309 360px,#78350f 700px,rgba(120,53,15,.5) calc(100% - 160px),rgba(9,9,15,0) 100%)}
body[data-gb="arcoiris"] .console,body[data-gb="arcoiris"] .focus{background:linear-gradient(180deg,rgba(9,9,15,0),rgba(9,9,15,.4) 60%,#09090f),linear-gradient(90deg,#f472b6,#a78bfa,#22d3ee,#4ade80,#fbbf24,#f472b6);background-size:100% 100%,300% 100%;animation:logoHue 12s linear infinite}
body[data-gb="oro"] .mid-btns button,body[data-gb="oro"] .ctl-help{color:#3b1d06}

/* reloj rectangular en la carcasa + la escena es la pantalla del Game Boy */
.fgb .fc-clock{flex-shrink:0;height:clamp(118px,17vh,160px);border-radius:16px;background:radial-gradient(ellipse 70% 90% at 50% 50%,rgba(124,92,255,.22),transparent 72%),linear-gradient(180deg,#0b0a1f,#141035);box-shadow:inset 0 2px 10px rgba(0,0,0,.85),inset 0 0 0 2px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.1)}
.fgb .fc-clock::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
.fgb .fc-clock .fc-time{font-size:clamp(34px,10vw,48px)}
.fgb-bezel{padding:10px 10px 6px}
.fgb-screen{box-shadow:inset 0 0 0 2px rgba(0,0,0,.7)}
.fc-buddies{top:8px}
@media (max-height:720px){.fgb .fc-clock{height:108px}.fc-buddies{top:8px}}
/* escenas más vivas: todos respiran, el paseo tiene sol y pájaros, orar brilla, el vaso sube y baja */
:where(.fs) .av{animation:idleB 3.2s ease-in-out infinite;transform-origin:50% 100%}
@keyframes idleB{0%,100%{transform:scale(1,1)}50%{transform:scale(1.015,1.025) translateY(-1px)}}
.bg-park .fs-char{animation:walkSway 1.2s ease-in-out infinite}
@keyframes walkSway{0%,100%{translate:0 0}25%{translate:-3px -3px}50%{translate:0 0}75%{translate:3px -3px}}
.fs-run.bg-park .fs-char{animation-duration:.72s}
.px-sun{position:absolute;right:14%;top:14%;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle,#fff7c2,#fde047 55%,rgba(253,224,71,0) 72%);animation:auraP 4s ease-in-out infinite}
.sky-day[data-tod="noche"] .px-sun{background:radial-gradient(circle,#f8fafc,#e0e7ff 50%,rgba(224,231,255,0) 70%);box-shadow:none}
.px-birds{top:22%;--d:26s}.px-birds i{font-size:16px;animation:flap .5s ease-in-out infinite alternate}
@keyframes flap{to{transform:translateY(-6px) scaleY(.8)}}
.px-mid{--d:13s}.px-near{--d:5s}
.fx-rays{animation-duration:16s}
.fx-rays.r2{animation-duration:24s;animation-direction:reverse;opacity:.6}
.fx-light{animation:rayPulse 3.5s ease-in-out infinite}
@keyframes rayPulse{0%,100%{opacity:.55}50%{opacity:1}}
.fx-halo{position:absolute;left:50%;top:22%;width:120px;height:120px;margin-left:-60px;border-radius:50%;background:radial-gradient(circle,rgba(253,230,138,.55),transparent 65%);animation:auraP 3.5s ease-in-out infinite}
.fx-word{font-size:15px;animation-duration:8s}
.fs-pray .arm-l,.fs-pray .arm-r{filter:drop-shadow(0 0 6px rgba(253,230,138,.8))}
.fs-water .arm-r{animation:drink 3s ease-in-out infinite}
@keyframes drink{0%,20%,100%{transform:rotate(18deg)}40%,65%{transform:rotate(132deg)}}
.fs-water .glass{transform-box:fill-box;transform-origin:50% 50%;animation:tilt 3s ease-in-out infinite}
@keyframes tilt{0%,20%,100%{transform:rotate(0)}40%,65%{transform:rotate(-35deg)}}
.fx-jug{position:absolute;left:16%;bottom:14px;font-size:34px;animation:floaty 3s ease-in-out infinite}
.fs-read .arm-r{animation:turnPage 6s ease-in-out infinite}
@keyframes turnPage{0%,85%,100%{transform:rotate(26deg)}90%{transform:rotate(12deg)}}
/* la hora del día se nota en el cuarto */
.tint{position:absolute;inset:0;z-index:4;pointer-events:none;transition:background 2s}
[data-time="amanecer"] .tint{background:linear-gradient(180deg,rgba(251,146,60,.12),rgba(244,114,182,.06))}
[data-time="tarde"] .tint{background:linear-gradient(180deg,rgba(249,115,22,.16),rgba(124,58,237,.08))}
[data-time="noche"] .tint{background:radial-gradient(circle at 60% 14%,rgba(253,230,138,.22),transparent 38%),rgba(8,10,40,.42)}
[data-time="amanecer"] .win{background:linear-gradient(180deg,#f472b6,#fb923c 55%,#fde68a)}
[data-time="amanecer"] .sun{top:auto;bottom:12px;left:40%;background:#fdba74;box-shadow:0 0 18px #fb923c}
[data-time="tarde"] .sun{top:auto;bottom:16px;left:62%;background:#fb923c;box-shadow:0 0 18px #f97316}
[data-time="noche"] .sun{background:#fef9c3;box-shadow:0 0 12px #fef08a,inset -4px -2px 0 #e5e7eb}
[data-time="noche"] .v1{filter:brightness(.45)}
[data-time="noche"] .v2{opacity:1!important;filter:brightness(1.6)}
[data-time="noche"] .lampc::after{box-shadow:0 14px 70px 34px rgba(253,230,138,.34)}
[data-time="noche"] .curt i{filter:brightness(.7)}
.sky-dusk[data-tod="amanecer"],.sky-day[data-tod="amanecer"]{background:linear-gradient(180deg,#f472b6,#fb923c 55%,#fde68a)}
.sky-room[data-tod="amanecer"]::before{background:linear-gradient(180deg,#f472b6,#fdba74)}
/* cuenta */
.acct{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px;background:var(--s2);margin-bottom:8px}
.acct img,.acct>span{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--s3);display:flex;align-items:center;justify-content:center;font-size:22px}
.acct b{display:block;font-size:14.5px}.acct small{display:block;font-size:11.5px;color:var(--muted)}
.login{display:flex;flex-direction:column;gap:12px}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px;border-radius:14px;background:#fff;color:#1f1f1f;font-weight:700;font-size:15px;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.or{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:12px}.or::before,.or::after{content:'';flex:1;height:1px;background:var(--border)}
.inp.code{font:700 24px var(--mono);letter-spacing:8px;text-align:center}
.note.small{font-size:11px}
.rk-count{font-size:12.5px;color:var(--acc3);margin:8px 0}
.rk-join .btn-acc{margin-top:6px}

/* ================= onboarding v3 (estilo Duolingo/Finch) ================= */
.onb-top{display:flex;align-items:center;gap:12px;padding:14px 20px 10px}
.onb-back{width:36px;height:36px;border-radius:12px;font-size:18px;color:var(--muted);flex-shrink:0}
.onb-prog{flex:1;height:14px;border-radius:8px;background:var(--s3);overflow:hidden}
.onb-prog i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--green),#22c55e);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),inset 0 3px 0 rgba(255,255,255,.25);transition:width .5s cubic-bezier(.22,1,.36,1)}
.onb-foot{flex-direction:column}
.btn-acc.big,.btn-ghost.big{padding:16px;font-size:15px;letter-spacing:.06em;font-weight:800;border-radius:16px}
.btn-acc.big{box-shadow:0 5px 0 #4c1d95}.btn-acc.big.btn-green{box-shadow:0 5px 0 #15803d}
.btn-acc.big:active{transform:translateY(3px);box-shadow:0 2px 0 #4c1d95}
.onb-foot .btn-ghost{width:100%;padding:14px;font-weight:800;letter-spacing:.06em;color:var(--acc3)}
.masc{display:flex;align-items:flex-start;gap:12px;margin:6px 0 18px;animation:fu .35s ease both}
.masc-gb{position:relative;flex-shrink:0;width:64px;height:84px;border-radius:12px 12px 20px 12px;background:linear-gradient(165deg,#8b6cff,#5b3fd6);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 6px 0 #3b2596;animation:mascBob 2.4s ease-in-out infinite}
.masc-scr{position:absolute;left:8px;right:8px;top:8px;height:38px;border-radius:6px;background:#0e0c24;box-shadow:inset 0 0 0 2px #1b1545}
.masc-scr b{position:absolute;top:11px;width:8px;height:10px;border-radius:4px;background:#5ee08a;box-shadow:0 0 6px #5ee08a;animation:blink 4s infinite}
.masc-scr b:first-child{left:10px}.masc-scr b:nth-child(2){right:10px}
.masc-scr em{position:absolute;left:50%;bottom:7px;width:14px;height:6px;margin-left:-7px;border-radius:0 0 8px 8px;background:#5ee08a}
.masc-gb span{position:absolute;left:10px;bottom:12px;width:14px;height:14px;background:linear-gradient(#1b1545,#1b1545) center/14px 4px no-repeat,linear-gradient(#1b1545,#1b1545) center/4px 14px no-repeat}
.masc-gb span::after{content:'';position:absolute;right:-30px;top:0;width:10px;height:10px;border-radius:50%;background:#f472b6;box-shadow:-12px 6px 0 #c4b5fd}
@keyframes mascBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
.masc.party .masc-gb{animation:mascJump .9s ease-in-out infinite}
@keyframes mascJump{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px) rotate(-6deg)}60%{transform:translateY(-14px) rotate(6deg)}}
.bubble{position:relative;flex:1;padding:14px 16px;border-radius:18px;background:var(--s1);border:2px solid var(--s4);font-size:16px;line-height:1.45;color:var(--text)}
.bubble::before{content:'';position:absolute;left:-10px;top:22px;width:16px;height:16px;background:var(--s1);border-left:2px solid var(--s4);border-bottom:2px solid var(--s4);transform:rotate(45deg)}
.bubble b{color:#fff}
.masc.big{flex-direction:column;align-items:center;text-align:center;margin-top:30px}
.masc.big .masc-gb{width:110px;height:144px;border-radius:18px 18px 34px 18px}
.masc.big .masc-scr{left:13px;right:13px;top:13px;height:66px}
.masc.big .masc-scr b{top:20px;width:14px;height:18px;border-radius:6px}.masc.big .masc-scr b:first-child{left:18px}.masc.big .masc-scr b:nth-child(2){right:18px}
.masc.big .masc-scr em{bottom:12px;width:24px;height:10px;margin-left:-12px}
.masc.big .masc-gb span{left:16px;bottom:20px;transform:scale(1.5)}
.masc.big .bubble::before{left:50%;top:-10px;margin-left:-8px;transform:rotate(135deg)}
.onb-hero{position:relative}
.onb-hero canvas{position:absolute;inset:-20px -20px auto;height:320px;width:calc(100% + 40px);opacity:.3;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.onb-hero .how{margin-top:18px}.how i{font-size:15px}
.code-in{display:grid;gap:8px;margin-top:16px;width:100%;text-align:left}.code-in textarea{font-family:var(--mono);font-size:12px;resize:none}
.inp.big{font-size:22px;font-weight:700;padding:16px 18px;text-align:center;border-width:2px}
.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pre{aspect-ratio:92/110;border-radius:16px;background:var(--s1);border:2px solid var(--s3);padding:4px;overflow:hidden;transition:transform .12s,border-color .15s}
.pre .av{width:100%;height:100%}
.pre.on{border-color:var(--green);background:rgba(74,222,128,.1);transform:scale(1.04);box-shadow:0 4px 0 #15803d}
.areas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.area,.goal{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:16px 14px;border-radius:18px;background:var(--s1);border:2px solid var(--s3);box-shadow:0 4px 0 var(--s3);transition:transform .1s}
.area:active,.goal:active{transform:translateY(3px);box-shadow:0 1px 0 var(--s3)}
.area span{font-size:32px}.area b{font-size:16px}.area small{font-size:12px;color:var(--muted);line-height:1.35}
.area i{position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;font-style:normal;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--s4)}
.area.on,.goal.on{border-color:var(--green);background:rgba(74,222,128,.08);box-shadow:0 4px 0 #15803d}
.area.on i{background:var(--green);border-color:var(--green);color:#052e16}
.goals{display:flex;flex-direction:column;gap:10px}
.goal{flex-direction:row;align-items:center;gap:12px}
.goal b{font-size:18px;min-width:78px}.goal span{font-weight:700;color:var(--acc3)}.goal small{flex:1;font-size:12.5px;color:var(--muted)}
.goal i{font-style:normal;font-size:22px;opacity:.25;transition:opacity .2s}.goal.on i{opacity:1;animation:flame 1s ease-in-out infinite alternate}
.ex-cat{grid-column:1/-1;font-family:var(--pixel);font-size:8px;color:var(--acc2);margin:10px 0 2px;letter-spacing:.5px}
.ex-cat:first-child{margin-top:0}
.onb .login .inp{margin-top:2px}
/* ================= cuarto más Game Boy: papel tapiz, tapete pixel, alféizar, rayos de luz, póster, LCD ================= */
.screen::before{content:'';position:absolute;inset:0;z-index:41;pointer-events:none;background-image:linear-gradient(rgba(0,0,0,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.09) 1px,transparent 1px);background-size:3px 3px;mix-blend-mode:multiply;opacity:.55}
[data-skin="barrio"] .wall{background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.07) 1.5px,transparent 2px) 0 0/18px 18px,repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 2px,transparent 2px 22px),linear-gradient(180deg,var(--wall),var(--wall2))}
[data-type="cuarto"] .wall{background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 10px,transparent 10px 20px),linear-gradient(180deg,var(--wall),var(--wall2))}
.prug{position:absolute;left:34%;bottom:5%;width:38%;height:7%;z-index:0;border-radius:3px;background:repeating-linear-gradient(90deg,#7c3aed 0 8px,#a78bfa 8px 16px,#f472b6 16px 24px);box-shadow:inset 0 0 0 3px rgba(0,0,0,.25),0 2px 0 rgba(0,0,0,.35);opacity:.8;transform:perspective(120px) rotateX(35deg)}
.scene.open .prug,.scene[data-type^="garaje"] .prug,.scene[data-type="piscina"] .prug,.scene[data-type="hangar"] .prug{display:none}
.sill{position:absolute;top:156px;right:40px;width:112px;height:8px;z-index:3;border-radius:2px;background:linear-gradient(180deg,var(--wood),var(--wood2));box-shadow:0 3px 4px rgba(0,0,0,.35)}
.sill i{position:absolute;right:8px;bottom:6px;font-style:normal;font-size:16px}
[data-skin="torre"] .sill{top:164px;right:40px;width:140px}[data-skin="rasca"] .sill{top:170px;width:172px}
[data-skin="nubes"] .sill,[data-skin="orbital"] .sill,.scene.open .sill{display:none}
.beams{position:absolute;top:150px;right:30px;width:190px;height:52%;z-index:4;pointer-events:none;background:linear-gradient(200deg,rgba(255,244,200,.16),rgba(255,244,200,0) 70%);clip-path:polygon(40% 0,95% 0,70% 100%,0 100%);animation:beamPulse 6s ease-in-out infinite}
@keyframes beamPulse{0%,100%{opacity:.7}50%{opacity:1}}
[data-time="noche"] .beams{background:linear-gradient(200deg,rgba(199,210,254,.08),transparent 70%)}
[data-time="tarde"] .beams{background:linear-gradient(200deg,rgba(251,146,60,.2),transparent 70%)}
.scene.open .beams,[data-skin="orbital"] .beams{display:none}
.poster{position:absolute;left:25%;top:96px;width:44px;height:56px;z-index:1;display:none;flex-direction:column;align-items:center;justify-content:center;border-radius:3px;background:linear-gradient(160deg,#2c2166,#110c30);box-shadow:0 0 0 3px var(--wood2),0 4px 8px rgba(0,0,0,.4);transform:rotate(-3deg)}
.poster b{font:700 16px var(--font);background:linear-gradient(90deg,#a78bfa,#22d3ee,#4ade80);-webkit-background-clip:text;background-clip:text;color:transparent}
.poster small{font-family:var(--pixel);font-size:5px;color:#8f86c9}
.scene[data-type="cuarto"] .poster,.scene[data-type="sala"] .poster,.scene[data-type="oficina"] .poster,.scene[data-type="juegos"] .poster{display:flex}
.poster{left:18px;top:74px}
.scene.furn .poster{left:18px;top:74px}

/* idioma */
.lang-seg{display:flex;gap:6px}.lang-seg button{flex:1;padding:10px;border-radius:12px;border:1px solid var(--border);background:var(--s2);font-weight:600;font-size:14px}
.lang-seg button.on{background:var(--acc);border-color:var(--acc)}
.onb-lang{font-size:12.5px;font-weight:600;padding:7px 11px;border-radius:20px;border:1px solid var(--bh);background:rgba(124,92,255,.14);color:var(--text);white-space:nowrap}

/* marca de la consola: GAME LIFE, al estilo de las consolas de bolsillo (diseño propio) */
.gl-mark{display:inline-flex;align-items:baseline;gap:3px;font-family:var(--font);font-style:italic;font-weight:700;letter-spacing:-.3px;line-height:1;transform:skewX(-6deg)}
.gl-mark b{font-size:12px;color:#b9b2e6;font-weight:700}
.gl-mark i{font-size:12px;font-weight:700;background:linear-gradient(90deg,#a78bfa,#22d3ee,#4ade80,#fbbf24,#f472b6,#a78bfa);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:logoHue 5s linear infinite}
.bezel-label .gl-mark{margin-left:2px}
.fgb .gl-mark b,.fgb .gl-mark i{font-size:10.5px}
@media (prefers-reduced-motion:reduce){.gl-mark i{animation:none}}