:root{font-family:Inter,system-ui,sans-serif;color:#f7f7fb;background:#070911}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#070911}button{font:inherit;color:inherit}#app{max-width:520px;min-height:100vh;margin:auto;padding-bottom:92px;background:radial-gradient(circle at 50% 25%,#272145 0,#0d101d 42%,#070911 75%)}header{height:76px;padding:17px 17px 8px;display:flex;align-items:center;justify-content:space-between}.brand small{display:block;font-size:10px;letter-spacing:3px;color:#9d7cff;font-weight:900}.brand b{font-size:21px}header button{border:1px solid #34324b;background:#151827;border-radius:14px;padding:10px 12px;font-size:11px;font-weight:900}.money{margin:4px 14px 12px;display:grid;grid-template-columns:1fr 1fr 1fr;background:#121522;border:1px solid #282b40;border-radius:18px;padding:11px 4px}.money div{text-align:center;border-right:1px solid #292c40}.money div:last-child{border:0}.money span{display:block;font-size:8px;letter-spacing:1px;color:#77798c;font-weight:900}.money b{font-size:17px}.money i{font-style:normal}main{padding:0 12px}.page{display:none}.page.active{display:block}.stage{border:1px solid #2b2d43;border-radius:26px;background:#10131f;overflow:hidden}.stageHead{height:58px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center}.stageHead span{font-size:9px;color:#b9a4ff;background:#29243f;padding:7px 9px;border-radius:10px;font-weight:900}.stageHead b{font-size:14px;letter-spacing:1px}.scene{height:375px;position:relative;overflow:hidden;background:linear-gradient(#232742 0 45%,#171823 45% 100%)}.city{position:absolute;inset:0;background:linear-gradient(90deg,transparent 5%,#171a2b 5% 20%,transparent 20% 26%,#1b1d31 26% 48%,transparent 48% 54%,#141726 54% 72%,transparent 72% 78%,#1b1d2c 78% 95%,transparent 95%);opacity:.8}.city:after{content:"";position:absolute;left:0;right:0;bottom:0;height:44%;background:linear-gradient(#28252b,#16161b)}.person{position:absolute;width:150px;height:265px;left:50%;bottom:52px;transform:translateX(-50%)}.head{position:absolute;left:45px;top:15px;width:64px;height:78px;background:#c98e68;border-radius:45% 48% 42% 45%;z-index:3;box-shadow:inset 0 -8px #a96752}.head i{position:absolute;top:32px;width:8px;height:5px;background:#161318;border-radius:50%}.head i:first-child{left:15px}.head i:nth-child(2){right:15px}.head em{position:absolute;width:25px;height:9px;border-bottom:3px solid #3c2723;left:20px;bottom:15px;border-radius:50%}.hair{position:absolute;left:39px;top:5px;width:76px;height:38px;background:#2a211f;border-radius:60% 45% 35% 30%;z-index:4;transform:rotate(-5deg)}.body{position:absolute;left:31px;top:85px;width:91px;height:105px;background:linear-gradient(120deg,#51463f,#282a2e);border-radius:25px 25px 8px 8px;z-index:2}.arm{position:absolute;top:99px;width:31px;height:118px;background:#373536;border-radius:20px;transform-origin:top}.a1{left:25px;transform:rotate(16deg)}.a2{right:21px;transform:rotate(-15deg)}.leg{position:absolute;top:178px;width:39px;height:95px;background:#24262c;border-radius:8px}.l1{left:38px;transform:rotate(5deg)}.l2{right:35px;transform:rotate(-4deg)}.cardInfo{position:absolute;left:13px;right:13px;bottom:12px;padding:11px 12px;border:1px solid #ffffff18;background:#0c0e16c9;backdrop-filter:blur(10px);border-radius:14px}.cardInfo b{font-size:11px}.cardInfo span{float:right;font-size:9px;color:#999bac}.energy{height:5px;margin-top:8px;background:#282a37;border-radius:10px;overflow:hidden}.energy i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#6d4cff,#bc78ff);transition:.2s}.tap,.primary{width:calc(100% - 24px);margin:14px 12px;border:0;border-radius:16px;padding:16px;background:linear-gradient(135deg,#7049ed,#a45cf1);font-weight:1000;box-shadow:0 9px 28px #754ae74d}.tap strong{margin-left:8px}.event{margin:0 12px 14px;border:1px solid #37304e;background:#171523;border-radius:17px;padding:13px;text-align:left}.event>span{font-size:9px;color:#ad87ff;font-weight:900}.event b{display:block;margin-top:4px}.event p{font-size:11px;color:#9391a1;line-height:1.35}.event div{display:flex;gap:8px}.event button{flex:1;border:1px solid #39364c;background:#222333;border-radius:11px;padding:9px;font-size:9px;font-weight:900}.pageTitle{text-align:center;padding:18px 8px 8px}.pageTitle span{font-size:9px;color:#8c73d8;letter-spacing:2px;font-weight:900}.pageTitle h2{margin:5px}.pageTitle p{color:#858797;font-size:12px}.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.slot{aspect-ratio:1;background:#151827;border:1px solid #2d3045;border-radius:17px;display:grid;place-items:center;font-size:31px;position:relative}.slot small{position:absolute;top:5px;right:6px;font-size:8px;background:#6f4de2;padding:3px 5px;border-radius:8px}.primary{width:100%;margin:16px 0}.upgrades,.road{display:grid;gap:10px}.upgrade,.road>div{border:1px solid #2a2d40;background:#141724;border-radius:17px;padding:15px}.upgrade{display:grid;grid-template-columns:1fr auto;gap:4px}.upgrade span,.road span{font-size:10px;color:#8f91a0}.upgrade button{grid-row:1/3;grid-column:2;border:0;background:#292840;border-radius:12px;padding:9px}.road>div.on{border-color:#815de8;box-shadow:inset 4px 0 #815de8}nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(520px,100%);height:78px;display:flex;background:#10131ef2;border-top:1px solid #292c3c;backdrop-filter:blur(15px);z-index:10}nav button{flex:1;border:0;background:none;color:#626576;font-size:18px}nav span{display:block;font-size:9px;margin-top:4px;font-weight:900}nav .on{color:#a980ff}#toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,15px);opacity:0;background:#292c3e;padding:11px 16px;border-radius:13px;font-size:12px;transition:.2s;z-index:20;white-space:nowrap}#toast.show{opacity:1;transform:translate(-50%,0)}.person.hit{animation:hit .16s}@keyframes hit{50%{transform:translateX(-50%) scale(.96) rotate(-2deg)}} html,body,#app{touch-action:manipulation;-webkit-text-size-adjust:100%}button,.tap{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.tap{cursor:pointer} /* one-screen mobile game layout */ html,body{height:100%;overflow:hidden}#app{height:100dvh;min-height:0;padding-bottom:72px;overflow:hidden;display:flex;flex-direction:column}header{height:62px;flex:0 0 62px;padding:10px 15px 6px}.brand b{font-size:18px}.money{flex:0 0 64px;margin:2px 12px 8px;padding:8px 3px}.money b{font-size:15px}main{flex:1;min-height:0;padding:0 10px;overflow:hidden}.page{height:100%;overflow:hidden}.page.active{display:block}#life .stage{height:100%;display:flex;flex-direction:column}.stageHead{height:46px;flex:0 0 46px;padding:8px 13px}.scene{height:auto;flex:1;min-height:0}.person{height:220px;transform:translateX(-50%) scale(.82);transform-origin:bottom center;bottom:44px}.cardInfo{bottom:8px;padding:8px 10px}.tap{flex:0 0 58px;margin:8px 10px;width:calc(100% - 20px);padding:12px;font-size:17px}.event{position:absolute;z-index:15;left:16px;right:16px;bottom:82px;margin:0;box-shadow:0 15px 50px #000c}.event p{margin:6px 0 9px}.event button{padding:8px}nav{height:68px}#depot,#market,#story{overflow:auto;padding-bottom:8px}.pageTitle{padding:8px 5px 5px}.pageTitle h2{font-size:20px;margin:3px}.pageTitle p{margin:4px;font-size:11px}@media(max-height:700px){header{height:52px;flex-basis:52px}.money{flex-basis:56px}.stageHead{height:40px;flex-basis:40px}.person{transform:translateX(-50%) scale(.7)}.tap{flex-basis:50px;margin:6px 10px}nav{height:60px}#app{padding-bottom:60px}} .scavenge{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:5px 0 10px;padding:11px 12px;border:1px solid #34304b;background:linear-gradient(135deg,#171927,#211a35);border-radius:16px}.scavenge span{display:block;font-size:9px;color:#a985ff;font-weight:900;letter-spacing:1px}.scavenge b{display:block;font-size:11px;margin-top:3px}.scavenge button{border:0;border-radius:12px;padding:11px 16px;background:linear-gradient(135deg,#7148ed,#a55af0);font-weight:1000}.slot em{position:absolute;left:4px;right:4px;bottom:5px;font-style:normal;font-size:7px;color:#aaaabd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.depotHelp{text-align:center;color:#77798b;font-size:9px;margin-top:8px}.slots{max-height:calc(100% - 150px);overflow:auto} .depotTop{height:58px;display:flex;align-items:center;justify-content:space-between;padding:5px 6px}.depotTop span{font-size:8px;letter-spacing:2px;color:#9d7cff;font-weight:900}.depotTop h2{margin:0;font-size:22px}.depotSilver{background:#171a28;border:1px solid #303348;border-radius:13px;padding:9px 13px}.mergeBoard{height:min(54vh,430px);display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:7px;padding:9px;border:1px solid #302c46;border-radius:22px;background:linear-gradient(145deg,#121522,#181427)}.mergeCell{min-width:0;border:1px solid #32364a;border-radius:15px;background:radial-gradient(circle at 50% 40%,#302b48,#181b28);display:grid;place-items:center;align-content:center;gap:3px;transition:.12s}.mergeCell span{font-size:34px}.mergeCell b{font-size:8px;color:#aaa7bc}.mergeCell.empty{background:#0e111b;border:1px dashed #282b3a}.mergeCell.picked{transform:scale(.92);border-color:#b278ff;box-shadow:0 0 20px #9b61ff66}.mergeActions{display:grid;grid-template-columns:1.3fr 1fr;gap:8px;margin-top:9px}.mergeActions button{border:1px solid #38344d;border-radius:15px;background:#191b29;padding:10px;color:#fff}.mergeActions button:first-child{background:linear-gradient(135deg,#7148ed,#a55af0);border:0}.mergeActions small{display:block;font-size:7px;color:#aaa6b8}.mergeActions b{font-size:11px}.mergeActions .active{border-color:#e2bd63;color:#e2bd63}.mergeNote{text-align:center;font-size:8px;color:#747687;margin-top:7px}@media(max-height:700px){.mergeBoard{height:45vh}.mergeCell span{font-size:28px}.depotTop{height:48px}} .mergeCell{touch-action:none;user-select:none;-webkit-user-select:none}.mergeCell.dragging{opacity:.28;transform:scale(.88)}.mergeGhost{position:fixed;z-index:9999;width:76px;height:76px;transform:translate(-50%,-50%) scale(1.08);pointer-events:none;border:2px solid #ad79ff;border-radius:17px;background:radial-gradient(circle at 50% 40%,#42365f,#1a1c2b);display:grid;place-items:center;align-content:center;box-shadow:0 12px 35px #000b,0 0 24px #9d61ff88}.mergeGhost span{font-size:38px}.mergeGhost b{font-size:8px;color:#ccc} /* Depot v15: original artifact-chain board */ #depot{overflow:hidden!important}.artifactHUD{display:flex;justify-content:space-between;align-items:center;margin:0 4px 7px;padding:8px 10px;border-radius:13px;background:#151827;border:1px solid #2c3042}.artifactHUD small{display:block;font-size:7px;color:#777b91;letter-spacing:1px}.artifactHUD b{font-size:10px}.artifactBoard{height:min(52vh,410px);display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);gap:4px;padding:7px;border-radius:20px;background:linear-gradient(145deg,#151725,#211831);border:1px solid #342d4a}.artifactCell{min-width:0;min-height:0;border:1px solid #33364b;border-radius:10px;background:radial-gradient(circle at 45% 35%,#352d4d,#171a27);display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;user-select:none}.artifactCell span{font-size:clamp(19px,6vw,31px);filter:drop-shadow(0 4px 5px #0008)}.artifactCell b{font-size:6px;color:#aaa9bc;margin-top:1px}.artifactCell.empty{background:#0d1019;border:1px solid #222636}.artifactCell.dragging{opacity:.18}.artifactGhost{position:fixed;z-index:9999;width:58px;height:58px;transform:translate(-50%,-50%) scale(1.12);pointer-events:none;border:2px solid #ae7aff;border-radius:14px;background:#252038;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 12px 35px #000c,0 0 25px #9d61ff99}.artifactGhost span{font-size:32px}.artifactGhost b{font-size:7px}.artifactQueue{height:55px;margin-top:7px;display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:14px;background:#11141f;border:1px solid #292d3e}.artifactQueue>span{font-size:7px;color:#797b8d;letter-spacing:1px;font-weight:900}.artifactQueue>div{display:flex;gap:6px}.artifactQueue i{width:36px;height:36px;border-radius:9px;background:#252034;border:1px solid #403657;display:grid;place-items:center;font-style:normal;font-size:20px}.mergeNote{font-size:7px;margin-top:5px}@media(max-height:700px){.artifactBoard{height:43vh}.artifactQueue{height:48px}.artifactQueue i{width:31px;height:31px;font-size:17px}} /* Depot v15 */ #depot{overflow:hidden!important}.artifactHUD{display:flex;justify-content:space-between;align-items:center;margin:0 4px 7px;padding:8px 10px;border-radius:13px;background:#151827;border:1px solid #2c3042}.artifactHUD small{display:block;font-size:7px;color:#777b91;letter-spacing:1px}.artifactHUD b{font-size:10px}.artifactBoard{height:min(52vh,410px);display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);gap:4px;padding:7px;border-radius:20px;background:linear-gradient(145deg,#151725,#211831);border:1px solid #342d4a}.artifactCell{min-width:0;min-height:0;border:1px solid #33364b;border-radius:10px;background:radial-gradient(circle at 45% 35%,#352d4d,#171a27);display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;user-select:none}.artifactCell span{font-size:clamp(19px,6vw,31px);filter:drop-shadow(0 4px 5px #0008)}.artifactCell b{font-size:6px;color:#aaa9bc}.artifactCell.empty{background:#0d1019;border-color:#222636}.artifactCell.dragging{opacity:.18}.artifactGhost{position:fixed;z-index:9999;width:58px;height:58px;transform:translate(-50%,-50%) scale(1.12);pointer-events:none;border:2px solid #ae7aff;border-radius:14px;background:#252038;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 12px 35px #000c,0 0 25px #9d61ff99}.artifactGhost span{font-size:32px}.artifactGhost b{font-size:7px}.artifactQueue{height:55px;margin-top:7px;display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:14px;background:#11141f;border:1px solid #292d3e}.artifactQueue>span{font-size:7px;color:#797b8d;letter-spacing:1px;font-weight:900}.artifactQueue>div{display:flex;gap:6px}.artifactQueue i{width:36px;height:36px;border-radius:9px;background:#252034;border:1px solid #403657;display:grid;place-items:center;font-style:normal;font-size:20px}@media(max-height:700px){.artifactBoard{height:43vh}.artifactQueue{height:48px}.artifactQueue i{width:31px;height:31px;font-size:17px}} /* v27 nav interaction fix */ nav{z-index:9999!important;pointer-events:auto!important} nav button,nav button span{pointer-events:auto!important;position:relative;z-index:10000} main{position:relative;z-index:1} #toast{pointer-events:none} /* v28 fixed-slot merge depot */ #depot.active{display:flex;flex-direction:column;overflow:hidden!important}.artifactBoard{flex:1;height:auto!important;min-height:330px;max-height:560px}.artifactCell{padding:0;cursor:grab}.artifactCell.empty{border-style:dashed}.artifactCell:active{cursor:grabbing}.mergeNote{padding:8px 4px 4px;color:#8d8fa0;font-size:9px} /* v31 drag stability */ .artifactGhost{will-change:left,top;pointer-events:none!important}.artifactCell.dragging{visibility:hidden!important}.artifactBoard{touch-action:none;overscroll-behavior:none} /* v32 native-element drag: no cloned ghosts */ .artifactGhost{display:none!important}.artifactCell.dragging{visibility:visible!important;opacity:.95!important;transition:none!important;will-change:transform;pointer-events:auto}.artifactBoard{contain:layout paint;isolation:isolate;touch-action:none} /* v33 deterministic grid drag */ .artifactCell.dragging{transform:translate3d(var(--dx,0),var(--dy,0),0) scale(1.06)!important;z-index:50!important;transition:none!important;will-change:transform}.artifactBoard{overflow:hidden!important} /* v34 reliable pointer drag */ .artifactCell{touch-action:none!important;-webkit-user-drag:none}.artifactCell.dragging{transition:none!important;will-change:transform} /* v35 drag feedback */ .artifactCell.dragging{opacity:1!important;filter:brightness(1.25);box-shadow:0 0 0 3px #b56cff,0 0 28px rgba(181,108,255,.85)!important}.artifactCell.dropTarget{box-shadow:inset 0 0 0 3px rgba(181,108,255,.75),0 0 18px rgba(181,108,255,.35)!important}.artifactCell.mergeTarget{transform:scale(1.08);box-shadow:inset 0 0 0 3px #d9a2ff,0 0 28px rgba(199,117,255,.8)!important;animation:mergePulse .55s ease-in-out infinite alternate}@keyframes mergePulse{from{filter:brightness(1)}to{filter:brightness(1.45)}} /* v36 larger 5x5-feel slots + fluid drag */ .artifactBoard{grid-template-columns:repeat(5,1fr)!important;grid-template-rows:repeat(6,1fr)!important;gap:7px!important;padding:9px!important;max-height:620px!important;min-height:470px!important}.artifactCell{min-width:0;min-height:0;border-radius:15px!important}.artifactCell span{font-size:clamp(25px,8vw,40px)!important}.artifactCell b{font-size:10px!important}.artifactCell.dragging{transition:transform 28ms linear!important;filter:brightness(1.28);box-shadow:0 10px 35px rgba(0,0,0,.5),0 0 0 3px #b56cff,0 0 32px rgba(181,108,255,.8)!important}.artifactCell.mergeTarget{transition:transform .12s ease!important} /* v37 magnetic merge targeting */ .artifactCell.mergeTarget{transform:scale(1.13)!important;box-shadow:inset 0 0 0 4px #e1b2ff,0 0 34px rgba(199,117,255,.95)!important}.artifactCell.dropTarget{box-shadow:inset 0 0 0 3px rgba(181,108,255,.85),0 0 22px rgba(181,108,255,.5)!important} /* v38 finger-locked drag + forgiving merge */ .artifactCell.dragging{opacity:.98!important;pointer-events:none!important;transition:none!important;box-shadow:0 14px 42px rgba(0,0,0,.65),0 0 0 3px #c07aff,0 0 35px rgba(181,108,255,.9)!important}.artifactCell.mergeTarget{transform:scale(1.14)!important;animation:mergePulse .35s ease-in-out infinite alternate!important} /* v39 clean floating drag */ .artifactCell.dragSource{opacity:.22!important}.dragFloat{opacity:1!important;transform:scale(1.13)!important;transition:none!important;box-shadow:0 16px 45px rgba(0,0,0,.7),0 0 0 3px #c47cff,0 0 38px rgba(181,108,255,.95)!important}.artifactCell.mergeTarget{transform:scale(1.12)!important;box-shadow:inset 0 0 0 4px #dca5ff,0 0 36px rgba(199,117,255,.95)!important} /* v40 canonical Depot engine — interact.js */ .artifactBoard{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-template-rows:repeat(6,minmax(0,1fr))!important;gap:7px!important;padding:9px!important;min-height:0!important;height:auto!important;max-height:none!important;flex:1!important;overflow:visible!important;contain:none!important;isolation:isolate;touch-action:none!important} .artifactCell{position:relative!important;min-width:0!important;min-height:0!important;border-radius:15px!important;touch-action:none!important;user-select:none!important;-webkit-user-select:none!important;-webkit-touch-callout:none!important;transition:box-shadow .12s ease,filter .12s ease!important} .artifactCell span{font-size:clamp(27px,8vw,42px)!important}.artifactCell b{font-size:10px!important} .artifactCell.dragging,.artifactCell.dragSource{visibility:visible!important;opacity:1!important} .artifactCell.draggingLive{opacity:1!important;filter:brightness(1.2);box-shadow:0 16px 40px rgba(0,0,0,.65),0 0 0 3px #c47cff,0 0 32px rgba(181,108,255,.8)!important;transition:none!important;will-change:transform} .artifactCell.mergeTarget{transform:none!important;animation:mergePulse40 .34s ease-in-out infinite alternate!important;box-shadow:inset 0 0 0 4px #e0b1ff,0 0 32px rgba(199,117,255,.95)!important} .artifactCell.dropTarget{box-shadow:inset 0 0 0 3px rgba(181,108,255,.8),0 0 18px rgba(181,108,255,.5)!important} .dragFloat,.artifactGhost,.mergeGhost{display:none!important} @keyframes mergePulse40{from{filter:brightness(1)}to{filter:brightness(1.55)}} /* v41 artifact reward flight */ .artifactFly{position:fixed;z-index:999999;transform:translate(-50%,-50%) scale(.85);width:64px;height:64px;border-radius:17px;background:radial-gradient(circle at 45% 35%,#43345f,#191b29);border:2px solid #bc83ff;box-shadow:0 8px 28px #000b,0 0 28px rgba(181,108,255,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .62s ease}.artifactFly span{font-size:34px;line-height:34px}.artifactFly b{font-size:9px;margin-top:2px}.depotCatch{animation:depotCatch41 .72s ease}@keyframes depotCatch41{35%{color:#d7b1ff;transform:scale(1.13);text-shadow:0 0 18px #a96fff}100%{transform:scale(1)}} /* v42 visual rewards */ .artifactReward{position:fixed;z-index:999999;width:82px;height:82px;margin:-41px 0 0 -41px;border-radius:22px;background:radial-gradient(circle at 50% 35%,#51406e,#171925 70%);border:2px solid #c28aff;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;opacity:0;transform:translateY(22px) scale(.55);box-shadow:0 0 0 1px #ffffff18,0 15px 40px #000c,0 0 45px #9d61ffaa;transition:transform .55s cubic-bezier(.18,.85,.25,1.2),opacity .25s ease}.artifactReward.show{opacity:1;transform:translateY(0) scale(1)}.artifactReward span{font-size:45px;line-height:45px;filter:drop-shadow(0 5px 7px #0008)}.artifactReward b{font-size:11px;margin-top:3px;text-shadow:0 0 8px #b985ff}.coinBurst{position:fixed;z-index:999998;font-size:28px;color:#eee;pointer-events:none;opacity:0;text-shadow:0 0 12px #a978ff;transform:translate(-50%,-50%) scale(.5);transition:transform .72s cubic-bezier(.2,.8,.2,1),opacity .2s}.coinBurst.go{opacity:0;transform:translate(calc(-50% + var(--drift)),calc(-50% - 90px)) scale(1.15) rotate(25deg)}.silverPop{position:fixed;z-index:999999;color:#fff;font-size:24px;pointer-events:none;opacity:1;transform:translate(-50%,-50%) scale(.7);text-shadow:0 0 14px #b47cff;transition:transform .6s ease,opacity .6s ease}.silverPop.go{opacity:0;transform:translate(-50%,-130%) scale(1.35)}#silver.silverPulse{animation:silverPulse42 .45s ease}@keyframes silverPulse42{50%{text-shadow:0 0 18px #b47cff;transform:scale(1.12)}} /* v43 Dynasty card demo */ #story{overflow:auto!important}.dynastyDemo{padding:0 2px 14px}.demoTag{font-size:8px;letter-spacing:1.5px;color:#a982ff;font-weight:900;margin:3px 3px 8px}.dynastyCards{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.dynastyCard{position:relative;min-height:154px;border:1px solid #37344d;border-radius:18px;background:radial-gradient(circle at 50% 35%,#342b4c,#151824 68%);padding:13px 8px 10px;overflow:hidden}.dynastyCard i{position:absolute;right:9px;top:8px;font-style:normal;font-size:14px;color:#c7a5ff}.dynastyCard em{display:block;font-style:normal;font-size:58px;filter:drop-shadow(0 8px 10px #0008)}.dynastyCard small{display:block;color:#b98aff;font-size:8px;font-weight:1000;letter-spacing:1px}.dynastyCard b{display:block;font-size:12px;margin:3px}.dynastyCard span{font-size:8px;color:#85889a}.dynastyCard.lv5{border-color:#c18cff;box-shadow:inset 0 0 22px #8d55d62e}.breedBox,.stakeBox{margin-top:10px;padding:13px;border:1px solid #302e43;border-radius:17px;background:#131622}.breedBox b,.stakeBox b{display:block;font-size:11px}.breedBox span,.stakeBox span{display:block;font-size:9px;color:#8d8fa0;line-height:1.45;margin:4px 0 9px}.breedBox button{width:100%;border:0;border-radius:12px;padding:11px;background:linear-gradient(135deg,#7049ed,#a45cf1);font-size:10px;font-weight:1000}.breedBox button.bred{box-shadow:0 0 28px #9d61ff99;transform:scale(.98)}.stakeBox{border-color:#51406e}.road{margin-top:10px} /* v44 card progression + breeding info */ .cardProgress{margin:7px 10px 0;padding:9px 11px;border:1px solid #302d45;border-radius:14px;background:#11141f}.cardProgress>div:first-child{display:flex;justify-content:space-between}.cardProgress b{font-size:10px}.cardProgress span,.cardProgress small{font-size:8px;color:#9294a5}.cardBar{height:6px;background:#272a38;border-radius:8px;margin:7px 0 5px;overflow:hidden}.cardBar i{display:block;height:100%;background:linear-gradient(90deg,#714cff,#c27aff);transition:.18s}.cardProgress small{display:inline-block}.cardProgress button{float:right;border:0;background:none;color:#b98aff;font-size:8px;font-weight:900}.cardModal{display:none;position:fixed;inset:0;z-index:20000;background:#05060bc9;align-items:flex-end}.cardModal.open{display:flex}.cardSheet{width:min(520px,100%);margin:auto;background:#151824;border:1px solid #343149;border-radius:24px 24px 0 0;padding:20px 17px 26px;position:relative}.cardSheet>button{position:absolute;right:13px;top:10px;border:0;background:#292c3c;border-radius:50%;width:34px;height:34px;font-size:22px}.cardSheet>span,.cardSheet label{font-size:8px;color:#a77fff;letter-spacing:1.5px;font-weight:900}.cardSheet h3{margin:5px 0 9px}.cardSheet p,.cardSheet>small{font-size:10px;color:#9a9cac;line-height:1.45}.breedRule{padding:12px;margin:12px 0;border:1px solid #51406e;border-radius:13px;text-align:center;font-weight:900;color:#d7bdff}.breedLink{display:flex;gap:6px;margin-top:6px}.breedLink input{min-width:0;flex:1;background:#0c0f18;border:1px solid #303346;border-radius:10px;padding:10px;color:#c9cbd5;font-size:8px}.breedLink button{border:0;border-radius:10px;background:#774cec;padding:9px;color:#fff;font-size:8px;font-weight:900} /* v46 approved Brodyaga artwork */ .person.heroArt{width:min(88%,390px)!important;height:auto!important;bottom:42px!important;display:flex;align-items:flex-end;justify-content:center;filter:drop-shadow(0 18px 28px #0009);transform:translateX(-50%)!important}.person.heroArt img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain;transform-origin:bottom center;animation:heroIdle46 3.4s ease-in-out infinite}.person.heroArt.hit img{animation:heroTap46 .22s ease!important}@keyframes heroIdle46{0%,100%{transform:translateY(0) rotate(-.25deg)}50%{transform:translateY(-4px) rotate(.35deg)}}@keyframes heroTap46{0%{transform:scale(1)}45%{transform:scale(.965) translateY(5px)}100%{transform:scale(1)}} /* v47 swipe hero rarity cards */ .person.heroDeck{position:absolute!important;left:0!important;right:0!important;top:0!important;bottom:48px!important;width:auto!important;height:auto!important;transform:none!important;overflow:hidden;filter:none!important;touch-action:pan-y}.heroTrack{height:100%;display:flex;transition:transform .28s cubic-bezier(.2,.8,.2,1);will-change:transform}.heroCard{position:relative;flex:0 0 100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,#3b3155 0,#1b1d2c 55%,#11131d 100%);border:2px solid #4c4962;overflow:hidden}.heroCard:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 20%,#ffffff0c 45%,transparent 68%);pointer-events:none}.heroCard .rarity{position:absolute;right:12px;top:12px;font-size:8px;font-weight:1000;letter-spacing:1px;padding:5px 8px;border-radius:9px;background:#191b28cc}.heroCard .sex{position:absolute;left:13px;top:11px;font-size:20px;color:#9d83ff}.heroPortrait{position:relative;font-size:clamp(118px,34vw,175px);line-height:1;filter:drop-shadow(0 15px 20px #0008)}.heroPortrait i{position:absolute;right:-25px;bottom:0;font-style:normal;font-size:.38em}.heroName{margin-top:5px;font-size:13px;font-weight:1000;text-transform:uppercase;letter-spacing:.7px}.heroCard small{font-size:10px;color:#c9b5ff;margin-top:4px}.heroCard.rare{border-color:#4f8cff;box-shadow:inset 0 0 38px #397cff25}.heroCard.rare .rarity{color:#75a6ff}.heroCard.epic{border-color:#a85cff;box-shadow:inset 0 0 45px #9c4fff38}.heroCard.epic .rarity{color:#c58aff}.heroCard.legendary{border-color:#ffb43c;box-shadow:inset 0 0 48px #ff9d2435}.heroCard.legendary .rarity{color:#ffc45d}.heroCard.mythic{border-color:#ff5fb7;box-shadow:inset 0 0 55px #ff4cad3d}.heroCard.mythic .rarity{color:#ff8bcb}.heroDots{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex;gap:5px;z-index:5}.heroDots i{width:5px;height:5px;border-radius:50%;background:#77798a}.heroDots i.on{width:15px;border-radius:6px;background:#a66bff}.heroDeck.hit .heroCard{animation:heroCardTap47 .18s ease}@keyframes heroCardTap47{50%{filter:brightness(1.18);transform:scale(.985)}} /* v48 force carousel over legacy character */ .scene{isolation:isolate!important}.scene>.heroDeck{z-index:20!important;display:block!important;background:#11131d!important}.scene>.heroDeck .heroTrack{display:flex!important;position:absolute!important;inset:0!important;z-index:21!important}.scene>.heroDeck .heroCard{display:flex!important;visibility:visible!important;opacity:1!important}.scene>.heroDeck .heroDots{z-index:30!important}.scene>.heroDeck~.cardInfo{z-index:40!important;position:absolute!important;left:10px!important;right:10px!important;bottom:8px!important}.heroCard.common:first-child .heroPortrait span{font-size:0}.heroCard.common:first-child .heroPortrait span:after{content:"";display:block;width:220px;height:285px;background:url("assets/brodyaga-v1.svg?v=48") center/contain no-repeat}.heroCard.common:first-child .heroPortrait i{right:-4px} /* v49 screenshot-like Life layout */ header{align-items:flex-start!important}.topActions{display:flex;gap:8px;align-items:center}.energyBattery{display:flex;align-items:center;gap:5px;padding:5px 7px;border:1px solid #34304b;border-radius:14px;background:#111421;box-shadow:0 0 18px #8d5cff22}.energyBattery>span{font-size:15px}.batteryShell{position:relative;width:66px;height:20px;border:2px solid #6d658b;border-radius:6px;padding:2px}.batteryShell:after{content:"";position:absolute;right:-5px;top:5px;width:3px;height:7px;border-radius:0 2px 2px 0;background:#6d658b}.batteryShell i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#7b51ff,#c778ff);transition:.2s}.batteryShell b{position:absolute;inset:0;display:grid;place-items:center;font-size:7px;text-shadow:0 1px 2px #000}.scene{min-height:440px!important}.scene>.heroDeck{bottom:0!important}.heroCard{margin:8px 16px 16px!important;height:calc(100% - 24px)!important;flex-basis:calc(100% - 32px)!important;border-radius:24px!important}.heroTrack{gap:32px!important}.heroPortrait{width:86%;height:72%;font-size:0!important;border-radius:18px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 42%,#4b315d,#1a1c28 62%,#0d0f16);box-shadow:inset 0 0 45px #0008}.heroPortrait .personArt{position:absolute;inset:0;background-position:center bottom;background-repeat:no-repeat;background-size:contain}.heroPortrait.portrait0 .personArt{background-image:url("assets/brodyaga-v1.svg?v=49");filter:drop-shadow(0 12px 12px #0008)}.heroPortrait.portrait1 .personArt{background-image:radial-gradient(ellipse at 50% 32%,#d39a78 0 10%,transparent 11%),linear-gradient(150deg,transparent 35%,#7d4738 36% 62%,transparent 63%);transform:scale(.9)}.heroPortrait.portrait2 .personArt{background-image:radial-gradient(ellipse at 50% 30%,#ad7059 0 10%,transparent 11%),linear-gradient(145deg,transparent 31%,#222734 32% 68%,transparent 69%)}.heroPortrait.portrait3 .personArt{background-image:radial-gradient(ellipse at 50% 30%,#d8a07e 0 10%,transparent 11%),linear-gradient(145deg,transparent 31%,#57334f 32% 68%,transparent 69%)}.heroPortrait.portrait4 .personArt{background-image:radial-gradient(ellipse at 50% 29%,#9a6655 0 10%,transparent 11%),linear-gradient(145deg,transparent 31%,#181925 32% 68%,transparent 69%)}.heroPortrait.portrait5 .personArt{background-image:radial-gradient(ellipse at 50% 29%,#d39479 0 10%,transparent 11%),linear-gradient(145deg,transparent 31%,#43234f 32% 68%,transparent 69%)}.heroPortrait.portrait6 .personArt{background-image:radial-gradient(ellipse at 50% 29%,#b8755b 0 10%,transparent 11%),linear-gradient(145deg,transparent 31%,#51361e 32% 68%,transparent 69%)}.heroPortrait.portrait7 .personArt{background-image:radial-gradient(ellipse at 50% 29%,#dda17c 0 10%,transparent 11%),linear-gradient(145deg,transparent 31%,#69451f 32% 68%,transparent 69%)}.heroPortrait.portrait8 .personArt,.heroPortrait.portrait9 .personArt{background-image:radial-gradient(ellipse at 50% 29%,#c98468 0 10%,transparent 11%),linear-gradient(145deg,transparent 31%,#392148 32% 68%,transparent 69%)}.heroPortrait i{font-size:48px!important;right:8px!important;bottom:8px!important;z-index:2}.heroName{font-size:14px!important}.heroCard .rarity{font-size:9px!important}.heroCard .sex{font-size:22px!important}.heroDots{bottom:21px!important}.cardProgress{margin-top:8px!important}.cardProgress b:before{content:"УРОВЕНЬ ";font-size:8px;color:#8e90a2}.cardProgress #cardLv{font-size:0}.cardProgress #cardLv:after{content:"1 / 5";font-size:12px}.stageHead #rankBadge{display:none!important} /* v50 fix card viewport + feeding control */ .stage{overflow:hidden!important}.scene{overflow:hidden!important;min-height:430px!important}.scene>.heroDeck{left:0!important;right:0!important;top:0!important;bottom:0!important;overflow:hidden!important}.heroTrack{width:100%!important;gap:0!important}.heroCard{box-sizing:border-box!important;flex:0 0 100%!important;width:100%!important;margin:0!important;height:100%!important;border-radius:0 0 20px 20px!important}.heroPortrait{width:76%!important;height:67%!important;margin-top:22px!important}.heroName{max-width:90%!important;text-align:center!important;white-space:normal!important}.feedDock{padding:8px 14px 0;background:#11131d}.feedHero{width:100%;height:48px;border:1px solid #754dbe;border-radius:15px;background:linear-gradient(135deg,#2b2142,#171923);box-shadow:inset 0 0 22px #9e5cff20;color:#fff;font-size:13px;font-weight:1000;letter-spacing:.4px}.feedHero strong{color:#c895ff;margin-left:7px}.feedHero:active,.feedHero.fed{transform:scale(.975);box-shadow:0 0 26px #a560ff66,inset 0 0 24px #9e5cff44} /* v51 official Swiper replaces all homemade card swipe logic */ #person.heroDeck.swiper{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important;transform:none!important;touch-action:pan-y!important;z-index:20!important;background:#11131d!important} #person .heroTrack.swiper-wrapper{position:relative!important;inset:auto!important;width:100%!important;height:100%!important;display:flex!important;gap:0!important;transition-property:transform!important;box-sizing:content-box!important;will-change:transform} #person .heroCard.swiper-slide{position:relative!important;display:flex!important;flex:0 0 100%!important;width:100%!important;height:100%!important;margin:0!important;box-sizing:border-box!important;align-items:center!important;justify-content:center!important;border-radius:0 0 20px 20px!important;overflow:hidden!important} #person .swiper-pagination{position:absolute!important;left:0!important;right:0!important;bottom:12px!important;transform:none!important;display:flex!important;justify-content:center!important;gap:5px!important;z-index:40!important} #person .swiper-pagination-bullet{width:6px!important;height:6px!important;margin:0!important;background:#898b9c!important;opacity:.65!important} #person .swiper-pagination-bullet-active{width:18px!important;border-radius:6px!important;background:#a55cff!important;opacity:1!important} /* v52 compact stable Life layout; remove fake CSS portrait placeholders */ #life{overflow:hidden!important}.stage{height:calc(100dvh - 292px)!important;min-height:0!important;display:grid!important;grid-template-rows:42px minmax(0,1fr) 54px 58px 68px!important;overflow:hidden!important}.stageHead{height:auto!important;min-height:0!important}.scene{min-height:0!important;height:auto!important;overflow:hidden!important}.heroPortrait{width:72%!important;height:70%!important;margin:8px auto 0!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;background:radial-gradient(circle at 50% 46%,#432b5a,#171a26 67%,#0d0f16)!important}.heroPortrait .personArt{position:static!important;display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important;background:none!important;transform:none!important;filter:drop-shadow(0 10px 14px #0009)!important}.heroPortrait i{font-size:38px!important}.lifeActions{display:grid!important;grid-template-columns:1fr 96px!important;gap:8px!important;padding:6px 12px!important;background:#11131d!important}.feedHero,.miniAction{height:42px!important;border:1px solid #754dbe!important;border-radius:13px!important;background:linear-gradient(135deg,#2b2142,#171923)!important;color:#fff!important;font-size:11px!important;font-weight:1000!important}.miniAction{border-color:#343149!important;color:#bfa3ff!important}.cardProgress{margin:4px 12px!important;padding:7px 10px!important;min-height:0!important}.cardProgress button{display:none!important}.tap{margin:5px 12px 8px!important;width:calc(100% - 24px)!important;height:55px!important}.heroName{margin-top:3px!important}.heroCard small{margin-top:2px!important}.heroDots,#person .swiper-pagination{bottom:7px!important} @media(max-height:760px){.stage{height:calc(100dvh - 270px)!important;grid-template-rows:38px minmax(0,1fr) 50px 54px 62px!important}.heroPortrait{height:66%!important}.money{padding-top:7px!important;padding-bottom:7px!important}} /* v54 LIFE MODULE REBUILD — Embla, compact viewport, no Swiper geometry */ #life{height:100%!important;overflow:hidden!important} #life .stage{height:100%!important;display:grid!important;grid-template-rows:38px minmax(0,1fr) 48px 52px 58px!important;border-radius:22px!important;overflow:hidden!important} #life .stageHead{height:38px!important;padding:7px 14px!important} #life .scene{height:auto!important;min-height:0!important;overflow:hidden!important;position:relative!important} #person.heroDeck.embla{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;transform:none!important;overflow:hidden!important;background:#10131f!important;z-index:5!important} .emblaViewport{overflow:hidden!important;width:100%!important;height:100%!important;touch-action:pan-y pinch-zoom!important} .emblaContainer{display:flex!important;width:auto!important;height:100%!important;gap:0!important;position:static!important;transform:none;will-change:transform} .emblaSlide{flex:0 0 100%!important;min-width:0!important;width:100%!important;height:100%!important;margin:0!important;box-sizing:border-box!important;border-radius:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;position:relative!important;overflow:hidden!important} .heroPortrait{width:70%!important;height:68%!important;margin:0!important;position:relative!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;border-radius:18px!important;overflow:hidden!important;background:radial-gradient(circle at 50% 42%,#432c5b,#171a27 66%,#0d0f16)!important} .heroPortrait img.personArt{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important;position:static!important;background:none!important;transform:none!important;filter:drop-shadow(0 10px 15px #000a)!important;-webkit-user-drag:none} .heroPortrait img.art2,.heroPortrait img.art3{filter:hue-rotate(35deg) saturate(1.25) drop-shadow(0 10px 15px #000a)!important} .heroPortrait img.art4,.heroPortrait img.art5{filter:hue-rotate(75deg) saturate(1.45) drop-shadow(0 10px 15px #000a)!important} .heroPortrait img.art6,.heroPortrait img.art7{filter:sepia(.45) saturate(1.55) drop-shadow(0 10px 15px #000a)!important} .heroPortrait img.art8,.heroPortrait img.art9{filter:hue-rotate(285deg) saturate(1.65) drop-shadow(0 10px 15px #000a)!important} .heroPortrait i{position:absolute!important;right:7px!important;bottom:6px!important;font-size:34px!important;font-style:normal!important} .heroName{font-size:12px!important;margin:4px 0 0!important}.heroCard small{font-size:9px!important;margin:1px 0 14px!important} #heroDots{position:absolute!important;left:0!important;right:0!important;bottom:4px!important;display:flex!important;justify-content:center!important;gap:5px!important;z-index:20!important;transform:none!important} #heroDots button{width:6px;height:6px;padding:0;border:0;border-radius:50%;background:#77798a;opacity:.6}#heroDots button.on{width:18px;border-radius:8px;background:#a55cff;opacity:1} .lifeActions{display:grid!important;grid-template-columns:1fr 82px!important;gap:6px!important;padding:4px 10px!important;background:#10131f!important}.feedHero,.miniAction{height:40px!important} .cardProgress{margin:3px 10px!important;padding:6px 9px!important;height:46px!important}.cardProgress .cardBar{margin:5px 0 0!important} #life .tap{height:50px!important;min-height:50px!important;margin:4px 10px!important;width:calc(100% - 20px)!important;padding:0!important;align-self:center!important} @media(max-height:740px){#life .stage{grid-template-rows:34px minmax(0,1fr) 44px 48px 54px!important}.heroPortrait{height:62%!important}.heroName{font-size:11px!important}} /* v55 MAIN LIFE MODULE — Splide 4, fixed mobile game layout */ #life{height:100%!important;overflow:hidden!important} #life .stage{height:100%!important;display:grid!important;grid-template-rows:38px minmax(0,1fr) 48px 52px 58px!important;overflow:hidden!important} #life .scene{height:auto!important;min-height:0!important;overflow:hidden!important} #person.heroDeck.splide{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;transform:none!important;overflow:hidden!important;z-index:30!important;background:#10131f!important} #person .splide__track,#person .splide__list{height:100%!important} #person .splide__track{overflow:hidden!important;touch-action:pan-y!important} #person .heroTrack{display:flex!important;gap:0!important;position:static!important;width:auto!important} #person .heroCard.splide__slide{height:100%!important;width:100%!important;min-width:100%!important;margin:0!important;box-sizing:border-box!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;position:relative!important;border-radius:0!important;overflow:hidden!important} #person .heroPortrait{width:72%!important;height:70%!important;margin:0!important;position:relative!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;border-radius:20px!important;overflow:hidden!important;background:radial-gradient(circle at 50% 42%,#4b315d,#171a27 65%,#0c0e15)!important} #person img.personArt{position:static!important;display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important;background:none!important;transform:none!important;-webkit-user-drag:none!important;filter:drop-shadow(0 10px 14px #0009)!important} #person .heroPortrait i{position:absolute!important;right:7px!important;bottom:6px!important;font-size:34px!important;font-style:normal!important} #person .heroName{font-size:12px!important;margin:4px 0 0!important}#person .heroCard small{font-size:9px!important;margin:1px 0 15px!important} #person .splide__pagination{bottom:4px!important;gap:4px!important}#person .splide__pagination__page{width:6px!important;height:6px!important;margin:0 2px!important;background:#77798a!important;opacity:.65!important}#person .splide__pagination__page.is-active{width:18px!important;border-radius:8px!important;background:#a55cff!important;transform:none!important;opacity:1!important} .lifeActions{display:grid!important;grid-template-columns:1fr 82px!important;gap:6px!important;padding:4px 10px!important;background:#10131f!important}.feedHero,.miniAction{height:40px!important} .cardProgress{height:46px!important;margin:3px 10px!important;padding:6px 9px!important}.cardProgress .cardBar{margin:5px 0 0!important} #life .tap{height:50px!important;min-height:50px!important;margin:4px 10px!important;width:calc(100% - 20px)!important;padding:0!important} @media(max-height:740px){#life .stage{grid-template-rows:34px minmax(0,1fr) 44px 48px 54px!important}#person .heroPortrait{height:64%!important}} /* v56 passive energy, stable work tap */ #life .stage{grid-template-rows:38px minmax(0,1fr) 32px 52px 58px!important} .energyRegen{height:32px;display:flex;align-items:center;justify-content:center;padding:0 8px;background:#11131d;color:#85889a;font-size:7px;font-weight:900;letter-spacing:.7px;border-top:1px solid #25283a} #person.hit,.person.hit{animation:none!important;transform:none!important} #tap:active{transform:scale(.985)!important} @media(max-height:740px){#life .stage{grid-template-rows:34px minmax(0,1fr) 28px 48px 54px!important}.energyRegen{height:28px}} /* v62 — game-ready 600x800 cat cards: fill the existing carousel frame */ #person .heroCard.splide__slide{padding:14px 18px 18px!important;justify-content:center!important} #person .heroPortrait{ width:min(82%,360px)!important; height:auto!important; aspect-ratio:3/4!important; margin:0!important; border-radius:22px!important; overflow:hidden!important; background:#0c0e15!important; box-shadow:0 18px 42px #0008!important; } #person img.personArt{ position:absolute!important;inset:0!important; width:100%!important;height:100%!important; object-fit:cover!important;object-position:center center!important; transform:none!important;filter:none!important; } #person .heroCard .rarity{position:absolute!important;top:14px!important;right:20px!important;z-index:4!important} #person .heroCard small{position:absolute!important;bottom:10px!important;margin:0!important;z-index:4!important} @media(max-height:740px){#person .heroPortrait{width:min(72%,310px)!important}} /* v63 — card art itself already contains a tall card; fill the game's art viewport */ #person .heroPortrait{ width:min(82%,360px)!important; height:100%!important; max-height:100%!important; aspect-ratio:auto!important; border-radius:20px!important; } #person img.personArt{ position:absolute!important;inset:0!important; width:100%!important;height:100%!important; object-fit:cover!important; object-position:center!important; } #person .heroCard.splide__slide{padding:42px 18px 28px!important} @media(max-height:740px){#person .heroPortrait{width:min(78%,330px)!important;height:100%!important}} /* v64 — transparent five-cat collection */ #person .heroPortrait{background:transparent!important;box-shadow:none!important;overflow:visible!important} #person img.personArt{object-fit:contain!important;object-position:center bottom!important;filter:none!important;transform:none!important} /* v69 — Depot drag must not scroll/pan the page */ #depot.active{overscroll-behavior:none!important} #mergeBoard,#mergeBoard .artifactCell{ touch-action:none!important; -webkit-user-select:none!important; user-select:none!important; -webkit-touch-callout:none!important; } #mergeBoard{overscroll-behavior:contain!important} #mergeBoard .artifactCell{cursor:grab} #mergeBoard .artifactCell.draggingLive{cursor:grabbing} /* v70 — rank row was removed: scene must take its grid row */ #life .stage{ grid-template-rows:minmax(0,1fr) 28px 48px 54px!important; } #life .stageHead{display:none!important} #life .scene{grid-row:1!important;min-height:0!important;height:auto!important} #life .energyRegen{grid-row:2!important} #life .cardProgress{grid-row:3!important} #life #tap{grid-row:4!important} /* v73 — KITHD cats collection */ .catsGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:8px 8px 110px}.catCollectCard{min-width:0;overflow:hidden;background:linear-gradient(180deg,#0b1118,#080c12);border:1px solid #202a35;border-radius:8px;padding:7px 5px 9px;box-shadow:inset 0 0 18px rgba(0,0,0,.28)}.catRarity{font-size:9px;font-weight:900;color:#9bd75a;white-space:nowrap;text-align:center;letter-spacing:.2px}.catCollectArt{height:118px;display:flex;align-items:center;justify-content:center}.catCollectArt img{width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}.catCollectBoost{text-align:center;color:#69f59b;font-size:12px;font-weight:900}.page#cats{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}nav button{min-width:0} /* v75 — yearly staking and tasks */ #tasks{overflow-y:auto!important;padding-bottom:18px} .stakeStatus{margin:8px 0 12px;padding:14px 15px;border:1px solid #654c8b;border-radius:18px;background:linear-gradient(135deg,#211b33,#151824);box-shadow:inset 0 0 24px #8f5cff17} .stakeStatus b{display:block;color:#c7a4ff;font-size:12px;letter-spacing:.6px} .stakeStatus span{display:block;margin-top:5px;color:#9294a5;font-size:10px;line-height:1.4} .tasksList{display:grid;gap:10px} .taskCard{display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding:14px;border:1px solid #2c3044;border-radius:17px;background:#141724} .taskCard div:first-child b{display:block;font-size:11px} .taskCard div:first-child span{display:block;margin-top:4px;color:#8e90a1;font-size:9px} .taskCard strong{align-self:center;color:#b78cff;font-size:10px} .taskCard.done{border-color:#69509a;box-shadow:inset 3px 0 #9b6cff} .taskBar{grid-column:1/-1;height:5px;overflow:hidden;border-radius:8px;background:#292c3d} .taskBar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#7049ed,#bd78ff)} nav button{min-width:0;padding:0 2px} nav span{font-size:8px} /* v77 — breeding group */ .breedGroup{width:100%;margin:9px 0 0;border:1px solid #7653ae;border-radius:12px;padding:12px;background:linear-gradient(135deg,#2b2140,#191725);color:#c8a7ff;font-size:10px;font-weight:1000;letter-spacing:.3px} .breedGroup:active{transform:scale(.985)} /* v78 — live breeding */ .breedStatus{min-height:18px;margin:9px 2px 0;color:#aaa4bb;font-size:9px;line-height:1.4} .acceptBreed{width:100%;margin:9px 0 0;border:0;border-radius:12px;padding:13px;background:linear-gradient(135deg,#7049ed,#a45cf1);font-size:10px;font-weight:1000} .acceptBreed[hidden]{display:none} /* v79 — card progress + clean mobile breeding sheet */ .cardSheet{width:min(calc(100vw - 24px),560px)!important;max-width:560px!important;max-height:82dvh!important;overflow-y:auto!important;overflow-x:hidden!important;box-sizing:border-box!important;padding:24px 20px!important;border-radius:24px 24px 0 0!important} .cardSheet>*{max-width:100%!important;box-sizing:border-box!important} .cardSheet h3{font-size:26px!important;line-height:1.15!important;margin:12px 0!important} .breedRule{font-size:18px!important;line-height:1.25!important;padding:16px 12px!important;white-space:normal!important} .breedLink{display:flex;gap:8px;width:100%!important} .breedLink input{min-width:0!important;flex:1 1 auto!important} .breedLink button{flex:0 0 auto!important;padding:0 14px!important} .breedStatus{overflow-wrap:anywhere!important;word-break:break-word!important;font-size:13px!important;line-height:1.35!important} #cardLv{white-space:nowrap!important} /* v80 — mobile breeding sheet: keep every control inside the screen */ .cardModal{justify-content:center!important;align-items:flex-end!important;padding:0!important;overflow:hidden!important} .cardSheet{margin:0 auto!important;width:100%!important;max-width:560px!important;max-height:78dvh!important;padding:20px 16px calc(22px + env(safe-area-inset-bottom))!important;overflow-y:auto!important;overflow-x:hidden!important} .cardSheet>button{position:static!important;width:auto!important;height:auto!important;border-radius:12px!important;font-size:10px!important} .cardSheet>#closeCard{position:absolute!important;right:12px!important;top:10px!important;width:34px!important;height:34px!important;border-radius:50%!important;font-size:22px!important;z-index:3!important} .cardSheet>#acceptBreed,.cardSheet>#openBreedGroup{position:static!important;width:100%!important;height:auto!important;margin-top:10px!important;padding:13px!important} .cardSheet .breedLink{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;width:100%!important} .cardSheet .breedLink input{width:100%!important;min-width:0!important} .cardSheet .breedLink button{white-space:nowrap!important} /* v81 — Life Dynasty unique home redesign */ #app{background: radial-gradient(circle at 50% 18%,rgba(110,74,175,.22),transparent 28%), radial-gradient(circle at 15% 55%,rgba(19,92,71,.16),transparent 30%), linear-gradient(180deg,#080a12 0%,#0d1020 45%,#070910 100%)} header{background:linear-gradient(180deg,rgba(7,9,17,.96),rgba(7,9,17,.35));position:relative;z-index:5} .brand small{color:#d0ad70;letter-spacing:2.4px;font-size:11px} .energyBattery{border:1px solid #34384d;background:#10131f;border-radius:16px;padding:7px 9px;display:flex;align-items:center;gap:7px} .batteryShell{width:78px;height:24px;border:2px solid #54586d;border-radius:7px;padding:3px;position:relative} .batteryShell:after{content:"";position:absolute;right:-6px;top:6px;width:4px;height:8px;border-radius:0 3px 3px 0;background:#54586d} .batteryShell i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#f1b84b,#8b5cf6);box-shadow:0 0 12px #9b6cff88} .batteryShell b{position:absolute;inset:0;display:grid;place-items:center;font-size:9px;text-shadow:0 1px 3px #000} .money{background:rgba(13,16,29,.78);backdrop-filter:blur(16px);border-color:#303448;box-shadow:0 12px 40px #0004} #life{position:relative} .dynastyPass{width:100%;height:62px;margin:0 0 8px;border:1px solid #6f552f;border-radius:18px;padding:8px 11px;background: radial-gradient(circle at 88% 30%,rgba(255,190,74,.24),transparent 30%), linear-gradient(110deg,#16131b,#241a18 52%,#121522);display:flex;align-items:center;justify-content:space-between;text-align:left;box-shadow:inset 0 0 28px #d8953020,0 8px 28px #0005} .dynastyPass span{display:flex;min-width:0;flex-direction:column}.dynastyPass small{font-size:7px;letter-spacing:1.8px;color:#bfa77f}.dynastyPass b{font-family:Georgia,serif;font-size:17px;letter-spacing:1px;color:#f4cf87}.dynastyPass em{font-style:normal;font-size:7px;color:#888898;margin-top:2px;white-space:nowrap} .dynastyPass strong{flex:0 0 auto;border-radius:12px;padding:9px 10px;background:linear-gradient(135deg,#d79b38,#f0c66e);color:#17120b;font-size:8px;box-shadow:0 0 18px #d89b4050} #life .stage{border:0;background:transparent;border-radius:0;overflow:visible;min-height:0} #life .scene{border-radius:24px;overflow:visible;background: radial-gradient(circle at 50% 35%,rgba(99,70,137,.34),transparent 35%), linear-gradient(180deg,#161a2b 0%,#0e1420 58%,#0b0e16 100%);border:1px solid #2c3144;box-shadow:inset 0 0 55px #0007} #life .city{opacity:.18;filter:blur(2px)} #life .person{width:100%;height:100%;left:0;bottom:0;transform:none!important;position:absolute} #life .heroDeck .splide__track{height:100%;overflow:visible} #life .heroDeck .splide__list{height:100%;align-items:center} #life .heroCard{height:88%;display:flex;align-items:center;justify-content:center;position:relative;opacity:.42;transform:scale(.82);transition:.28s ease} #life .heroCard.is-active{opacity:1;transform:scale(1)} #life .heroCard:before{content:"";position:absolute;inset:4% 10% 5%;border:2px solid #9b8cc7;border-radius:24px;background:linear-gradient(180deg,#ffffff08,#00000022);box-shadow:0 0 26px #a78bfa35;pointer-events:none} #life .heroCard.uncommon:before{border-color:#27e6a0;box-shadow:0 0 28px #19d98b66} #life .heroCard.rare:before{border-color:#22b8ff;box-shadow:0 0 28px #159fe966} #life .heroCard.epic:before{border-color:#b16cff;box-shadow:0 0 28px #a855f766} #life .heroCard.legendary:before{border-color:#f4b942;box-shadow:0 0 30px #f4b94266} #life .heroPortrait{position:absolute;inset:10% 12% 12%;display:flex;align-items:center;justify-content:center} #life .heroPortrait img{max-width:88%;max-height:88%;object-fit:contain;filter:drop-shadow(0 16px 18px #000b)} #life .heroCard .rarity{position:absolute;right:13%;top:7%;z-index:3;padding:6px 10px;border-radius:12px;background:#111421dd;border:1px solid #ffffff16;font-size:8px;font-weight:1000;letter-spacing:1.5px} #life .heroCard.uncommon .rarity{color:#35e8a9}#life .heroCard.rare .rarity{color:#2ebdff}#life .heroCard.epic .rarity{color:#c284ff}#life .heroCard.legendary .rarity{color:#f7c85c} #life .heroCard>small{position:absolute;left:14%;bottom:8%;z-index:3;font-size:10px;color:#ddd4ff} #life .splide__pagination{bottom:-17px;gap:5px} #life .splide__pagination__page{width:6px;height:6px;border:0;border-radius:50%;background:#555a73;opacity:.7} #life .splide__pagination__page.is-active{background:#d0a85b;transform:scale(1.35)} .energyRegen{font-size:7px!important;letter-spacing:1.2px;color:#8e91a3!important} .cardProgress{margin:4px 10px 0!important;border:1px solid #303448!important;background:#0f1220cc!important;border-radius:17px!important;padding:9px 10px!important} .cardBar{height:7px!important;background:#24283a!important}.cardBar i{background:linear-gradient(90deg,#e79d38,#f1cc6e,#8b5cf6)!important} #cardInfo{display:none!important} .tap{border:1px solid #67512f!important;background:linear-gradient(135deg,#b7792e,#e2ad4e)!important;color:#17120b!important;box-shadow:0 10px 28px #d6933340!important;border-radius:18px!important} nav{background:rgba(10,13,23,.94)!important;border:1px solid #272c40!important;border-bottom:0!important;border-radius:24px 24px 0 0;box-shadow:0 -10px 35px #0008} nav .on{color:#e2b45e!important} @media(max-height:760px){.dynastyPass{height:54px}.dynastyPass em{display:none}#life .heroCard{height:84%}} /* v82 — compact premium home layout */ #life{padding-bottom:8px!important} #life .stage{height:auto!important;min-height:0!important;display:flex!important;flex-direction:column!important} #life .scene{height:390px!important;min-height:390px!important;position:relative!important;overflow:hidden!important;border-radius:24px!important} #life .person{inset:0!important;width:100%!important;height:100%!important} #life .heroDeck .splide__track{height:100%!important;overflow:visible!important} #life .heroDeck .splide__list{height:100%!important;align-items:center!important} #life .heroCard{height:350px!important;opacity:.35!important;transform:scale(.76)!important;transition:transform .28s ease,opacity .28s ease!important} #life .heroCard.is-active{opacity:1!important;transform:scale(.94)!important} #life .heroCard:before{inset:7px 12%!important;border-radius:26px!important} #life .heroPortrait{inset:34px 14% 40px!important} #life .heroPortrait img{max-width:82%!important;max-height:82%!important} #life .heroCard .rarity{top:20px!important;right:15%!important} #life .heroCard>small{bottom:22px!important;left:50%!important;transform:translateX(-50%)!important} #life .splide__pagination{bottom:6px!important;z-index:20!important} #life .splide__pagination__page{width:7px!important;height:7px!important;margin:0 3px!important} #life .energyRegen{height:26px!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important} #life .cardProgress{margin:0 10px 7px!important} #life .tap{height:58px!important;margin:0 10px 9px!important;width:calc(100% - 20px)!important} #life+.page{} #life>.dynastyPass{display:flex!important;width:calc(100% - 20px)!important;height:58px!important;margin:9px 10px 4px!important;position:relative!important;z-index:3!important} .dynastyPass small{font-size:7px!important}.dynastyPass b{font-size:16px!important}.dynastyPass em{font-size:7px!important} .money{margin-bottom:8px!important} @media(max-width:430px){ #life .scene{height:365px!important;min-height:365px!important} #life .heroCard{height:330px!important} #life .heroPortrait{inset:30px 12% 38px!important} #life .heroPortrait img{max-width:86%!important;max-height:86%!important} } @media(max-height:760px){ #life .scene{height:320px!important;min-height:320px!important} #life .heroCard{height:292px!important} #life>.dynastyPass{height:52px!important} } /* v83 — fit Life gameplay into mobile viewport */ #life{padding-bottom:92px!important} #life .stage{height:auto!important;min-height:0!important} #life .scene{height:310px!important;min-height:310px!important} #life .heroCard{height:292px!important} #life .heroCard:before{inset:5px 14%!important;border-radius:24px!important} #life .heroPortrait{inset:28px 15% 32px!important} #life .heroPortrait img{max-width:94%!important;max-height:94%!important} #life .heroCard .rarity{top:14px!important;right:16%!important} #life .heroCard>small{bottom:13px!important} #life .energyRegen{height:24px!important;font-size:8px!important} #life .cardProgress{margin:5px 10px 6px!important;padding:8px 12px!important} #life .tap{height:56px!important;margin:0 10px 7px!important} #life>.dynastyPass{height:54px!important;margin:7px 10px 8px!important;order:10!important} #life>.dynastyPass span{min-width:0!important} #life>.dynastyPass strong{flex:0 0 auto!important} @media(max-width:430px){ #life .scene{height:300px!important;min-height:300px!important} #life .heroCard{height:282px!important} #life .heroPortrait{inset:24px 13% 30px!important} } @media(max-height:760px){ #life .scene{height:270px!important;min-height:270px!important} #life .heroCard{height:252px!important} #life .heroPortrait{inset:20px 14% 26px!important} #life>.dynastyPass{height:48px!important} } /* v84 — Life Dynasty concept alignment */ #app{background: radial-gradient(circle at 50% 35%,rgba(47,76,126,.22),transparent 34%), linear-gradient(180deg,#080b13 0%,#090b12 100%)} #life{position:relative} #life:before{content:"";position:absolute;inset:-10px -12px 0;pointer-events:none;opacity:.32;background: radial-gradient(circle at 8% 48%,rgba(220,151,55,.22),transparent 16%), radial-gradient(circle at 94% 68%,rgba(220,151,55,.18),transparent 17%)} #life .stage{position:relative;overflow:visible!important;background:transparent!important;border:0!important} #life .scene{overflow:visible!important;background:transparent!important} #life .city{display:none!important} #life .heroDeck{width:100%!important;left:0!important;transform:none!important;bottom:auto!important;height:100%!important;position:absolute!important} #life .splide__track{overflow:visible!important;height:100%!important} #life .heroTrack{align-items:center!important} #life .heroCard{transform:scale(.76);opacity:.46;transition:transform .28s ease,opacity .28s ease,filter .28s ease;filter:saturate(.72);border-radius:24px} #life .heroCard.is-active{transform:scale(1);opacity:1;filter:none;z-index:5} #life .heroCard:before{inset:4px 8%!important;background:linear-gradient(180deg,rgba(31,36,55,.96),rgba(12,16,27,.98))!important;box-shadow:0 18px 45px #0009,0 0 24px currentColor!important} #life .heroCard.common{color:#dbe8ff}.heroCard.common:before{border-color:#dbe8ff!important} #life .heroCard.uncommon{color:#31efb0}.heroCard.uncommon:before{border-color:#31efb0!important} #life .heroCard.rare{color:#24baff}.heroCard.rare:before{border-color:#24baff!important} #life .heroCard.epic{color:#b36cff}.heroCard.epic:before{border-color:#b36cff!important} #life .heroCard.legendary{color:#ffbd45}.heroCard.legendary:before{border-color:#ffbd45!important} #life .heroCard .rarity{right:11%!important;background:#0d1220e8!important;border:1px solid currentColor!important;color:currentColor!important;letter-spacing:2px!important} #life .heroPortrait{inset:22px 9% 30px!important} #life .heroPortrait img{max-width:96%!important;max-height:96%!important;filter:drop-shadow(0 16px 22px #0008)} #life .heroCard>small{font-weight:900!important;color:#eef2ff!important} #life .splide__pagination{bottom:-13px!important} #life .splide__pagination__page{width:7px!important;height:7px!important;background:#37405f!important;opacity:1!important} #life .splide__pagination__page.is-active{background:#fff!important;transform:scale(1.25)!important} #life .tap{border:1px solid #5dafff!important;background:linear-gradient(180deg,#142440,#0d172b)!important;box-shadow:0 0 22px #3b8cff38,inset 0 0 18px #5baaff12!important} #life>.dynastyPass{border:1px solid #c68a31!important;background:linear-gradient(105deg,#21150d,#5a3516 58%,#21150d)!important;box-shadow:0 0 24px #d9942b32!important} #life>.dynastyPass strong{background:linear-gradient(180deg,#ffd36c,#d9952c)!important;color:#1c1308!important} .brand small{color:#e5b45f!important} nav .on{color:#e8b55a!important} /* v85 — centered carousel + remove outer square frame */ #life .stage{ border:none!important; outline:none!important; box-shadow:none!important; background:transparent!important; overflow:visible!important; } #life .scene{ border:none!important; outline:none!important; box-shadow:none!important; background:transparent!important; overflow:visible!important; } #life .heroDeck, #life .splide__track, #life .splide__list{ border:none!important; outline:none!important; box-shadow:none!important; background:transparent!important; } #life .heroTrack{ align-items:center!important; } #life .heroCard{ display:flex!important; align-items:center!important; justify-content:center!important; transform-origin:center center!important; } #life .heroCard.is-active{ transform:scale(1)!important; } #life .heroCard:not(.is-active){ transform:scale(.76)!important; } #life .heroPortrait{ left:9%!important; right:9%!important; width:auto!important; display:flex!important; align-items:center!important; justify-content:center!important; } #life .heroPortrait img{ display:block!important; margin:auto!important; object-position:50% 50%!important; } /* v86 — remove remaining legacy carousel rectangle + restore tap CTA */ #life .stage, #life .scene, #life .heroDeck, #life .splide, #life .splide__track, #life .splide__list, #life .heroTrack{ border:0!important; outline:0!important; box-shadow:none!important; background:transparent!important; } #life .stage:before,#life .stage:after, #life .scene:before,#life .scene:after, #life .heroDeck:before,#life .heroDeck:after, #life .splide__track:before,#life .splide__track:after{ display:none!important; content:none!important; } #life .heroCard{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important} #life .heroCard:before{border-width:2px!important;border-radius:28px!important} #life .tap{ color:#0b0c10!important; font-weight:950!important; border:1px solid #f4c35e!important; background:linear-gradient(100deg,#d99028 0%,#ffd164 55%,#e6a535 100%)!important; box-shadow:0 8px 26px #d99b3440!important; } /* v87 — stable centered cat carousel + restore cat art */ #life .scene{overflow:hidden!important} #person.heroDeck.splide{overflow:hidden!important;background:transparent!important} #person .splide__track{overflow:hidden!important;width:100%!important;height:100%!important} #person .splide__list{height:100%!important;align-items:stretch!important} #person .heroCard.splide__slide{ flex:0 0 100%!important; width:100%!important; min-width:100%!important; height:100%!important; padding:10px 18px 18px!important; transform:none!important; opacity:1!important; filter:none!important; overflow:visible!important; } #person .heroCard.splide__slide.is-active{transform:none!important} #person .heroPortrait{ position:absolute!important; inset:10px 8% 18px!important; width:auto!important; height:auto!important; max-height:none!important; margin:0!important; display:flex!important; align-items:center!important; justify-content:center!important; overflow:hidden!important; border-radius:28px!important; background:linear-gradient(180deg,rgba(30,35,55,.96),rgba(10,14,24,.98))!important; z-index:1!important; } #person img.personArt{ display:block!important; position:absolute!important; inset:0!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; object-fit:contain!important; object-position:50% 50%!important; opacity:1!important; visibility:visible!important; transform:none!important; filter:drop-shadow(0 14px 18px rgba(0,0,0,.55))!important; z-index:2!important; } #person .heroCard:before{z-index:3!important;inset:10px 8% 18px!important;pointer-events:none!important} #person .heroCard .rarity{z-index:5!important;top:20px!important;right:11%!important} #person .heroCard>small{z-index:5!important;left:50%!important;bottom:26px!important;transform:translateX(-50%)!important} /* v88 — cat artwork full visibility */ #person img.personArt{ opacity:1!important; visibility:visible!important; mix-blend-mode:normal!important; filter:brightness(1.75) contrast(1.06) saturate(1.18) drop-shadow(0 12px 20px rgba(0,0,0,.5))!important; } #person .heroPortrait{ background:radial-gradient(circle at 50% 48%,rgba(85,91,130,.48) 0%,rgba(31,36,56,.96) 55%,rgba(11,15,25,.98) 100%)!important; } #person .heroCard:before{ background:transparent!important; } /* v90 — collectible carousel: visible neighbours + arrows */ #life .scene{overflow:visible!important;padding:0!important} #person.heroDeck.splide{overflow:visible!important} #person .splide__track{overflow:hidden!important;padding-top:0!important;padding-bottom:0!important} #person .splide__list{align-items:center!important} #person .heroCard.splide__slide{ opacity:.34!important; transform:scale(.78)!important; transition:transform .32s ease,opacity .32s ease!important; } #person .heroCard.splide__slide.is-active{ opacity:1!important; transform:scale(1)!important; z-index:5!important; } #person .heroCard:before{inset:10px 4% 18px!important} #person .heroPortrait{inset:10px 4% 18px!important} #person .heroCard.common{color:#b9c0cc!important} #person .heroCard.common:before{border-color:#b9c0cc!important;box-shadow:0 0 24px #aeb5c055!important} #person .heroCard.uncommon{color:#31efb0!important} #person .heroCard.uncommon:before{border-color:#31efb0!important;box-shadow:0 0 26px #31efb066!important} #person .heroCard.epic{color:#b36cff!important} #person .heroCard.epic:before{border-color:#b36cff!important;box-shadow:0 0 28px #b36cff66!important} #person .heroCard.legendary{color:#ffbd45!important} #person .heroCard.legendary:before{border-color:#ffbd45!important;box-shadow:0 0 30px #ffbd4566!important} #person .heroCard.mythic{color:#ff334f!important} #person .heroCard.mythic:before{border-color:#ff334f!important;box-shadow:0 0 32px #ff334f88!important} #person .heroCard.common .rarity{color:#c8ced8!important} #person .heroCard.uncommon .rarity{color:#31efb0!important} #person .heroCard.epic .rarity{color:#c184ff!important} #person .heroCard.legendary .rarity{color:#ffca62!important} #person .heroCard.mythic .rarity{color:#ff425c!important} #person .heroArrows{position:absolute;inset:0;z-index:30;pointer-events:none} #person .heroArrow{ position:absolute!important;top:50%!important;transform:translateY(-50%)!important; width:42px!important;height:42px!important;border-radius:50%!important; border:1px solid #91a8d966!important;background:#0b1020e8!important; box-shadow:0 0 20px #000b!important;display:flex!important;align-items:center!important; justify-content:center!important;pointer-events:auto!important;z-index:31!important; } #person .heroArrow svg{width:16px!important;height:16px!important;fill:#fff!important} #person .heroPrev{left:7%!important} #person .heroNext{right:7%!important} #person .splide__pagination{bottom:-12px!important} /* v95 — visual-only atmospheric backgrounds; v90 carousel geometry untouched */ body{ background: radial-gradient(ellipse at 50% -10%,rgba(78,45,145,.34),transparent 42%), linear-gradient(180deg,#070911 0%,#090b14 45%,#05070c 100%)!important; } #app{ background: radial-gradient(circle at 18% 34%,rgba(72,52,140,.18),transparent 28%), radial-gradient(circle at 84% 52%,rgba(32,104,126,.12),transparent 26%), linear-gradient(180deg,rgba(8,10,18,.97),rgba(7,9,15,.99))!important; } #life:after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.48; background: linear-gradient(115deg,transparent 0 47%,rgba(255,255,255,.025) 48%,transparent 49%), radial-gradient(circle at 50% 43%,rgba(113,80,196,.13),transparent 30%); } #life>*{position:relative;z-index:1} #person .heroPortrait{ background: radial-gradient(circle at 50% 38%,rgba(103,87,157,.34),transparent 31%), linear-gradient(180deg,rgba(27,31,48,.92),rgba(10,13,22,.98))!important; } #person .heroCard.common .heroPortrait{background:radial-gradient(circle at 50% 38%,rgba(180,188,202,.18),transparent 34%),linear-gradient(180deg,#242936,#10131b)!important} #person .heroCard.uncommon .heroPortrait{background:radial-gradient(circle at 50% 38%,rgba(49,239,176,.17),transparent 34%),linear-gradient(180deg,#182d2b,#0c1718)!important} #person .heroCard.epic .heroPortrait{background:radial-gradient(circle at 50% 38%,rgba(179,108,255,.24),transparent 34%),linear-gradient(180deg,#29203a,#120f1c)!important} #person .heroCard.legendary .heroPortrait{background:radial-gradient(circle at 50% 38%,rgba(255,189,69,.22),transparent 34%),linear-gradient(180deg,#342919,#17120b)!important} #person .heroCard.mythic .heroPortrait{background:radial-gradient(circle at 50% 38%,rgba(255,51,79,.24),transparent 34%),linear-gradient(180deg,#351922,#180b10)!important} #person .heroPortrait:after{ content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background: linear-gradient(180deg,rgba(255,255,255,.045),transparent 26%), radial-gradient(ellipse at 50% 105%,rgba(0,0,0,.48),transparent 52%); z-index:1; } #person img.personArt{z-index:2!important} /* v96 — five user-selectable background themes; v90 carousel geometry untouched */ .themePicker{position:fixed;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:12000;display:flex;gap:9px;padding:6px 10px;border:1px solid #ffffff1f;border-radius:22px;background:#070911b8;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .themePicker button{width:18px;height:18px;min-width:18px;padding:0;border-radius:50%;border:1px solid #ffffff55;box-shadow:0 2px 8px #0009;transition:.2s transform,.2s box-shadow} .themePicker button:nth-child(1){background:linear-gradient(135deg,#080a10 35%,#d59b45)} .themePicker button:nth-child(2){background:radial-gradient(circle at 65% 35%,#61aaff,#10183c 40%,#02040b 70%)} .themePicker button:nth-child(3){background:linear-gradient(135deg,#8a20ff,#152fca 48%,#ff27c7)} .themePicker button:nth-child(4){background:linear-gradient(135deg,#ff681d 0 48%,#248aff 52% 100%)} .themePicker button:nth-child(5){background:linear-gradient(135deg,#ff149f,#151b50 48%,#00b7ff)} .themePicker button.on{transform:scale(1.3);box-shadow:0 0 0 2px #fff,0 0 15px #ffffff77} /* Main backgrounds */ body[data-theme="1"] #app{background:radial-gradient(circle at 50% 24%,#33251455,transparent 34%),linear-gradient(155deg,#11131a,#05060a 62%,#15100a)!important} body[data-theme="2"] #app{background:radial-gradient(circle at 78% 15%,#397bd055 0 8%,transparent 26%),radial-gradient(circle at 24% 48%,#18356c88,transparent 34%),linear-gradient(180deg,#050814,#080d20 58%,#02040b)!important} body[data-theme="3"] #app{background:radial-gradient(ellipse at 20% 26%,#8c20b966,transparent 32%),radial-gradient(ellipse at 82% 48%,#153fd977,transparent 34%),linear-gradient(145deg,#090615,#11092a 52%,#050711)!important} body[data-theme="4"] #app{background:radial-gradient(circle at 12% 35%,#d84a1b66,transparent 30%),radial-gradient(circle at 88% 42%,#176fcf66,transparent 32%),linear-gradient(160deg,#120907,#080b12 52%,#06101a)!important} body[data-theme="5"] #app{background:linear-gradient(180deg,#080616cc,#070914ee),repeating-linear-gradient(90deg,transparent 0 42px,#ff168d12 43px 44px),radial-gradient(circle at 78% 30%,#ff168d55,transparent 28%),radial-gradient(circle at 18% 55%,#087cff55,transparent 30%)!important} /* Abstract card layers at ~50% visual opacity */ body[data-theme] #person .heroPortrait{background-color:#090b13!important;background-blend-mode:screen,normal!important} body[data-theme="1"] #person .heroPortrait{background-image:linear-gradient(135deg,#ffffff08,transparent 38%,#d69b3d35 70%,transparent),linear-gradient(#10131cdd,#070910f2)!important} body[data-theme="2"] #person .heroPortrait{background-image:radial-gradient(circle at 70% 25%,#5b9cff55,transparent 25%),radial-gradient(circle at 28% 68%,#263f9d44,transparent 32%),linear-gradient(#11162ddd,#070a15f2)!important} body[data-theme="3"] #person .heroPortrait{background-image:linear-gradient(125deg,transparent 18%,#a020f055 36%,transparent 52%,#245cff55 68%,transparent 84%),linear-gradient(#1a0d2ddd,#080a18f2)!important} body[data-theme="4"] #person .heroPortrait{background-image:radial-gradient(circle at 12% 78%,#ff5a1f55,transparent 30%),radial-gradient(circle at 88% 22%,#268cff55,transparent 31%),linear-gradient(#17131ddd,#080b12f2)!important} body[data-theme="5"] #person .heroPortrait{background-image:linear-gradient(135deg,transparent 15%,#ff188855 16% 18%,transparent 19% 52%,#167dff55 53% 55%,transparent 56%),linear-gradient(#160d25dd,#070a16f2)!important} /* v97 — selector under LIFE DYNASTY + lower energy regen label */ .themePicker{ position:absolute!important; top:54px!important; left:22px!important; transform:none!important; z-index:12000!important; padding:5px 8px!important; gap:8px!important; } .themePicker button{width:16px!important;height:16px!important;min-width:16px!important} #life .energyRegen{ transform:translateY(12px)!important; margin-bottom:12px!important; } /* v98 — final 5 visual themes + requested header cleanup */ #life .energyRegen{display:none!important} .themePicker{ position:absolute!important;top:62px!important;left:24px!important;right:auto!important; transform:none!important;padding:4px 7px!important;gap:8px!important; background:#070911a8!important;border-radius:20px!important; } .themePicker button{width:16px!important;height:16px!important;min-width:16px!important} /* Full artwork-style backgrounds */ body[data-theme="1"] #app{background: radial-gradient(ellipse at 95% 12%,#dca24735,transparent 23%), linear-gradient(128deg,transparent 18%,#d8a24b22 19%,transparent 21% 48%,#d8a24b18 49%,transparent 51%), linear-gradient(155deg,#111319 0%,#050609 58%,#12100d 100%)!important} body[data-theme="2"] #app{background: radial-gradient(circle at 78% 18%,#6fb7ff44 0 5%,transparent 17%), radial-gradient(circle at 22% 42%,#164a9866,transparent 26%), radial-gradient(circle at 70% 70%,#102b6555,transparent 30%), linear-gradient(180deg,#02050e,#071128 58%,#02040a)!important} body[data-theme="3"] #app{background: radial-gradient(ellipse at 14% 25%,#8b20d96e,transparent 28%), radial-gradient(ellipse at 88% 44%,#195cff66,transparent 31%), linear-gradient(125deg,transparent 18%,#b31aff26 20%,transparent 38%,#165cff22 55%,transparent 72%), linear-gradient(155deg,#10051d,#08091a 62%,#04050b)!important} body[data-theme="4"] #app{background: radial-gradient(circle at 5% 34%,#ff571f77,transparent 26%), radial-gradient(circle at 94% 42%,#168cff77,transparent 28%), radial-gradient(ellipse at 45% 72%,#ff7a182b,transparent 24%), linear-gradient(160deg,#150704,#080b12 50%,#04121e)!important} body[data-theme="5"] #app{background: linear-gradient(180deg,#06071599,#070817e8), linear-gradient(105deg,transparent 12%,#ff168d22 13% 14%,transparent 15% 50%,#168cff22 51% 52%,transparent 53%), radial-gradient(circle at 82% 24%,#ff168d66,transparent 25%), radial-gradient(circle at 18% 58%,#087cff66,transparent 28%), #070817!important} /* Card art uses the same theme at ~50% strength */ body[data-theme="1"] #person .heroPortrait{background:linear-gradient(135deg,#0b0d13dd,#d39a384d 55%,#07080ddd),linear-gradient(155deg,#1a1c22,#08090d)!important} body[data-theme="2"] #person .heroPortrait{background:radial-gradient(circle at 70% 22%,#65adff77,transparent 25%),radial-gradient(circle at 25% 72%,#174a9c66,transparent 30%),linear-gradient(#101831dd,#050916f2)!important} body[data-theme="3"] #person .heroPortrait{background:linear-gradient(125deg,transparent 12%,#a522ef77 34%,transparent 50%,#245fff77 69%,transparent 86%),linear-gradient(#18082ddd,#070919f2)!important} body[data-theme="4"] #person .heroPortrait{background:radial-gradient(circle at 12% 78%,#ff5b2077,transparent 31%),radial-gradient(circle at 88% 22%,#258cff77,transparent 32%),linear-gradient(#171018dd,#070b13f2)!important} body[data-theme="5"] #person .heroPortrait{background:linear-gradient(135deg,transparent 13%,#ff168d77 14% 16%,transparent 17% 51%,#168cff77 52% 54%,transparent 55%),linear-gradient(#150b25dd,#060916f2)!important} /* v99 — compact top, selector below title, keep energy gauge */ #life .energyRegen{display:none!important} header{ min-height:112px!important; padding-top:18px!important; padding-bottom:10px!important; align-items:flex-start!important; } header .brand{position:relative!important;z-index:20!important;padding-top:2px!important} .themePicker{ position:absolute!important; top:48px!important; left:20px!important; right:auto!important; transform:none!important; z-index:12000!important; padding:4px 7px!important; gap:8px!important; } header .topActions{margin-top:0!important;align-self:flex-start!important} .energyBattery{display:flex!important;visibility:visible!important;opacity:1!important} .money{margin-top:0!important} /* v100 — real uploaded cat artwork backgrounds */ #app{ position:relative!important; background-color:#070911!important; background-repeat:no-repeat!important; background-position:center top!important; background-size:cover!important; background-attachment:scroll!important; } #app:before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:linear-gradient(180deg,rgba(4,6,12,.38) 0%,rgba(5,7,13,.52) 32%,rgba(4,6,12,.72) 100%); } #app>header,#app>.money,#app>main,#app>nav,#app>#themePicker,#app>#toast{position:relative;z-index:1} body[data-theme="1"] #app{background-image:url("assets/918BFCB3-8A1E-45F1-815D-6B49373094BE.png?v=100")!important} body[data-theme="2"] #app{background-image:url("assets/4B682CB3-EDF8-411E-9515-E29C6DE4323B.png?v=100")!important} body[data-theme="3"] #app{background-image:url("assets/BF29BDF6-CE1C-47AD-9963-B531F6121C71.png?v=100")!important} body[data-theme="4"] #app{background-image:url("assets/2E5A0C1B-D65E-4C2D-9EDB-E7ECFEC8D9FD.png?v=100")!important} body[data-theme="5"] #app{background-image:url("assets/43200592-708A-430A-95CC-F7E614983DE5.png?v=100")!important} /* cards reuse selected art softly, while cat remains readable */ body[data-theme="1"] #person .heroPortrait{background-image:linear-gradient(rgba(7,9,17,.50),rgba(7,9,17,.50)),url("assets/918BFCB3-8A1E-45F1-815D-6B49373094BE.png?v=100")!important} body[data-theme="2"] #person .heroPortrait{background-image:linear-gradient(rgba(7,9,17,.50),rgba(7,9,17,.50)),url("assets/4B682CB3-EDF8-411E-9515-E29C6DE4323B.png?v=100")!important} body[data-theme="3"] #person .heroPortrait{background-image:linear-gradient(rgba(7,9,17,.50),rgba(7,9,17,.50)),url("assets/BF29BDF6-CE1C-47AD-9963-B531F6121C71.png?v=100")!important} body[data-theme="4"] #person .heroPortrait{background-image:linear-gradient(rgba(7,9,17,.50),rgba(7,9,17,.50)),url("assets/2E5A0C1B-D65E-4C2D-9EDB-E7ECFEC8D9FD.png?v=100")!important} body[data-theme="5"] #person .heroPortrait{background-image:linear-gradient(rgba(7,9,17,.50),rgba(7,9,17,.50)),url("assets/43200592-708A-430A-95CC-F7E614983DE5.png?v=100")!important} body[data-theme] #person .heroPortrait{background-size:cover!important;background-position:center!important;background-blend-mode:normal!important} /* v101 — mockup layout: muted art + fixed bottom navigation */ html,body{height:100%;min-height:100%;overflow:hidden!important} body{background:#05070c!important} #app{ width:min(520px,100%)!important; height:100dvh!important; min-height:100dvh!important; overflow:hidden!important; padding-bottom:86px!important; background-position:center center!important; background-size:cover!important; } #app:before{ position:fixed!important; left:50%!important;top:0!important;bottom:0!important; width:min(520px,100%)!important; transform:translateX(-50%)!important; background:linear-gradient(180deg,rgba(3,5,10,.28) 0%,rgba(4,6,12,.38) 45%,rgba(3,5,10,.52) 100%)!important; } header{ height:96px!important;min-height:96px!important;flex:0 0 96px!important; padding:18px 20px 8px!important;align-items:flex-start!important; } header .brand small{color:#f0c26b!important;font-size:11px!important;letter-spacing:3px!important} .themePicker{top:54px!important;left:20px!important;background:#080b13b8!important} header .topActions{gap:8px!important} .energyBattery,header #wallet{ background:#0c1220dc!important;border:1px solid #53607a66!important; box-shadow:0 8px 24px #0008!important; } .money{ flex:0 0 76px!important;margin:0 20px 10px!important;padding:12px 4px!important; background:#0b1120e8!important;border:1px solid #5a668055!important; border-radius:19px!important;box-shadow:0 12px 28px #0007!important; } main{padding:0 20px!important;overflow:hidden!important} #life.active{height:100%!important;display:flex!important;flex-direction:column!important;overflow:hidden!important} #life .stage{ flex:1 1 auto!important;height:auto!important;min-height:0!important; border:0!important;background:transparent!important;border-radius:0!important;overflow:visible!important; display:flex!important;flex-direction:column!important; } #life .scene{flex:1 1 auto!important;min-height:300px!important;background:transparent!important;overflow:visible!important} #life .city{display:none!important} #person.heroDeck{bottom:auto!important;top:0!important} #life .cardProgress{ flex:0 0 58px!important;margin:0 0 10px!important; background:#0b1120e8!important;border:1px solid #52607b55!important; border-radius:17px!important;box-shadow:0 8px 24px #0007!important; } #life .tap{ flex:0 0 58px!important;width:100%!important;margin:0 0 10px!important; border-radius:17px!important;background:linear-gradient(180deg,#ffd765,#f4b938)!important; color:#090b10!important;box-shadow:0 8px 28px #f2b72f35!important; } #life .dynastyPass{ position:relative!important;left:auto!important;right:auto!important;bottom:auto!important; flex:0 0 64px!important;width:100%!important;margin:0!important; background:linear-gradient(90deg,rgba(42,25,8,.94),rgba(107,68,13,.92))!important; border:1px solid #f0b83f!important;border-radius:17px!important; box-shadow:0 8px 24px #0007!important; } nav{ position:fixed!important;left:50%!important;bottom:0!important;transform:translateX(-50%)!important; width:min(520px,100%)!important;height:82px!important; padding-bottom:max(4px,env(safe-area-inset-bottom))!important; background:#080d18f5!important;border:1px solid #39445b88!important;border-bottom:0!important; border-radius:24px 24px 0 0!important;backdrop-filter:blur(18px)!important; -webkit-backdrop-filter:blur(18px)!important;box-shadow:0 -8px 30px #0008!important; z-index:99999!important; } nav button{color:#7f879d!important;font-size:18px!important} nav button.on{color:#f4bf4d!important;text-shadow:0 0 16px #f4bf4d66!important} nav span{font-size:8px!important} @media(max-height:760px){ header{height:88px!important;min-height:88px!important;flex-basis:88px!important} .money{flex-basis:68px!important} #life .scene{min-height:260px!important} #life .cardProgress{flex-basis:52px!important} #life .tap{flex-basis:52px!important} #life .dynastyPass{flex-basis:58px!important} nav{height:74px!important} #app{padding-bottom:78px!important} } /* v102 — approved screen proportions, correct vertical order */ #app{padding-bottom:82px!important} header{height:92px!important;min-height:92px!important;flex:0 0 92px!important;padding:16px 20px 6px!important} .themePicker{top:52px!important} .money{flex:0 0 74px!important;margin:0 20px 8px!important} main{padding:0 20px!important} #life.active{display:flex!important;flex-direction:column!important;height:100%!important;min-height:0!important} #life .stage{display:contents!important} #life .scene{order:1!important;flex:1 1 auto!important;min-height:0!important;height:auto!important;overflow:visible!important;background:transparent!important} #life .cardProgress{order:2!important;position:relative!important;z-index:20!important;flex:0 0 52px!important;width:100%!important;margin:0 0 9px!important;padding:10px 14px!important} #life .tap{order:3!important;position:relative!important;z-index:20!important;flex:0 0 58px!important;width:100%!important;margin:0 0 9px!important;padding:12px!important} #life .dynastyPass{order:4!important;position:relative!important;z-index:20!important;flex:0 0 62px!important;width:100%!important;margin:0!important} #person.heroDeck{top:0!important;bottom:0!important;height:100%!important} #person .splide__track{height:100%!important} #person .splide__list{height:100%!important} #person .heroCard.splide__slide{height:100%!important} #person .heroCard:before{top:8px!important;bottom:8px!important} #person .heroPortrait{top:8px!important;bottom:8px!important} #person .heroPrev,#person .heroNext{top:50%!important} nav{height:82px!important;bottom:0!important} @media(max-height:760px){ header{height:82px!important;min-height:82px!important;flex-basis:82px!important} .themePicker{top:47px!important} .money{flex-basis:64px!important} #life .cardProgress{flex-basis:46px!important;margin-bottom:7px!important} #life .tap{flex-basis:52px!important;margin-bottom:7px!important} #life .dynastyPass{flex-basis:54px!important} nav{height:74px!important} #app{padding-bottom:74px!important} } /* v103 — tighter approved composition, preserve v90 carousel behavior */ #life .scene{ flex:0 0 clamp(330px,43vh,430px)!important; min-height:0!important; height:clamp(330px,43vh,430px)!important; } #person.heroDeck{ width:100%!important; height:100%!important; left:0!important; transform:none!important; } #person .heroCard:before, #person .heroPortrait{ top:10px!important; bottom:10px!important; left:13%!important; right:13%!important; } #person .heroPrev{left:7%!important} #person .heroNext{right:7%!important} #life .cardProgress{ flex:0 0 50px!important; margin-bottom:8px!important; } #life .tap{ flex:0 0 56px!important; margin-bottom:8px!important; } #life .dynastyPass{ flex:0 0 60px!important; margin-bottom:0!important; } #life.active:after{ content:""; display:block; flex:1 1 auto; min-height:34px; pointer-events:none; } @media(max-height:760px){ #life .scene{flex-basis:320px!important;height:320px!important} #person .heroCard:before,#person .heroPortrait{left:15%!important;right:15%!important} #life .cardProgress{flex-basis:46px!important} #life .tap{flex-basis:50px!important} #life .dynastyPass{flex-basis:54px!important} #life.active:after{min-height:18px} } /* v104 — fit full Life screen: shorter card, larger cat, full Pass above nav */ #life .scene{ flex:0 0 clamp(270px,35vh,350px)!important; height:clamp(270px,35vh,350px)!important; } #person .heroCard:before, #person .heroPortrait{ top:7px!important; bottom:7px!important; left:17%!important; right:17%!important; } #person img.personArt{ width:auto!important; height:76%!important; max-width:76%!important; object-fit:contain!important; left:50%!important; top:50%!important; transform:translate(-50%,-48%)!important; } #life .cardProgress{flex:0 0 48px!important;margin-bottom:7px!important} #life .tap{flex:0 0 54px!important;margin-bottom:7px!important} #life .dynastyPass{ flex:0 0 58px!important; min-height:58px!important; margin:0 0 8px!important; overflow:hidden!important; } #life.active:after{display:none!important} @media(max-height:760px){ #life .scene{flex-basis:260px!important;height:260px!important} #person .heroCard:before,#person .heroPortrait{left:18%!important;right:18%!important} #person img.personArt{height:80%!important;max-width:80%!important} #life .cardProgress{flex-basis:44px!important} #life .tap{flex-basis:49px!important} #life .dynastyPass{flex-basis:52px!important;min-height:52px!important;margin-bottom:6px!important} } /* v105 — ONLY requested fixes: larger cats, opaque side cards, aligned background */ #app{ background-size:cover!important; background-repeat:no-repeat!important; background-position:center 18%!important; } body[data-theme="1"] #app{background-position:center 18%!important} body[data-theme="2"] #app{background-position:center 22%!important} body[data-theme="3"] #app{background-position:center 18%!important} body[data-theme="4"] #app{background-position:center 16%!important} body[data-theme="5"] #app{background-position:center 18%!important} /* All carousel cards stay fully visible — no faded neighbours */ #person .heroCard.splide__slide{ opacity:1!important; } #person .heroCard.splide__slide.is-active{ opacity:1!important; } /* Keep card geometry; enlarge only cat artwork */ #person img.personArt{ height:92%!important; max-height:92%!important; max-width:92%!important; width:auto!important; object-fit:contain!important; left:50%!important; top:50%!important; transform:translate(-50%,-48%)!important; opacity:1!important; } /* v106 — restore v90 carousel side-card visibility; no other layout changes */ #life .scene{ overflow:visible!important; padding-left:0!important; padding-right:0!important; } #person.heroDeck.splide{ overflow:visible!important; width:calc(100% + 40px)!important; margin-left:-20px!important; } #person .splide__track{ overflow:hidden!important; padding-left:0!important; padding-right:0!important; } #person .splide__list{align-items:center!important} #person .heroCard.splide__slide{ opacity:1!important; transform:scale(.82)!important; transition:transform .32s ease,opacity .32s ease!important; } #person .heroCard.splide__slide.is-active{ opacity:1!important; transform:scale(1)!important; z-index:5!important; } #person .heroCard:before, #person .heroPortrait{ left:4%!important; right:4%!important; } #person .heroPrev{left:7%!important} #person .heroNext{right:7%!important} /* v107 — exact v90-style carousel viewport: center + half neighbours */ #person.heroDeck.splide{ width:100%!important; margin-left:0!important; overflow:visible!important; } #person .splide__track{ overflow:hidden!important; padding-left:18%!important; padding-right:18%!important; } #person .splide__list{align-items:center!important} #person .heroCard.splide__slide{ opacity:1!important; transform:scale(.82)!important; } #person .heroCard.splide__slide.is-active{ opacity:1!important; transform:scale(1)!important; z-index:5!important; } #person .heroCard:before, #person .heroPortrait{ left:4%!important; right:4%!important; } #person .heroPrev{left:7%!important} #person .heroNext{right:7%!important} /* v108 — tune carousel to approved mockup; background only repositioned */ #person .splide__track{ padding-left:13%!important; padding-right:13%!important; } #person .heroCard.splide__slide{ opacity:1!important; transform:scale(.88)!important; } #person .heroCard.splide__slide.is-active{ opacity:1!important; transform:scale(1)!important; } #person .heroCard:before, #person .heroPortrait{ left:8%!important; right:8%!important; } #person img.personArt{ height:100%!important; max-height:100%!important; max-width:100%!important; } #app{background-position:center top!important} body[data-theme="1"] #app{background-position:center top!important} body[data-theme="2"] #app{background-position:center top!important} body[data-theme="3"] #app{background-position:center top!important} body[data-theme="4"] #app{background-position:center top!important} body[data-theme="5"] #app{background-position:center top!important} /* v109 — ONLY cat placement/scale + background framing */ #person img.personArt{ height:118%!important; max-height:118%!important; max-width:118%!important; width:auto!important; left:50%!important; top:56%!important; transform:translate(-50%,-50%)!important; object-fit:contain!important; } /* frame uploaded vertical artwork closer to approved mockup */ #app{ background-size:auto 100%!important; background-position:center center!important; } body[data-theme="1"] #app{background-position:center 48%!important} body[data-theme="2"] #app{background-position:center 48%!important} body[data-theme="3"] #app{background-position:center 48%!important} body[data-theme="4"] #app{background-position:center 48%!important} body[data-theme="5"] #app{background-position:center 48%!important} /* v110 — test new mobile-native background on theme 1 only */ body[data-theme="1"] #app{ background-image:url("assets/5A5FC36D-DEBF-4DB1-B573-E6F226FC1BD5.png?v=110")!important; background-size:100% 100%!important; background-position:center top!important; background-repeat:no-repeat!important; } /* v111 — keep new background; fix cat artwork position only */ #person img.personArt{ width:auto!important; height:auto!important; max-width:82%!important; max-height:72%!important; left:50%!important; top:54%!important; transform:translate(-50%,-50%)!important; object-fit:contain!important; object-position:center center!important; } /* v112 — final framing pass for mobile-native theme 1 background */ body[data-theme="1"] #app{ background-image: linear-gradient(180deg,rgba(3,5,10,.12) 0%,rgba(3,5,10,.18) 52%,rgba(3,5,10,.24) 100%), url("assets/5A5FC36D-DEBF-4DB1-B573-E6F226FC1BD5.png?v=112")!important; background-size:100% 100%!important; background-position:center top!important; background-repeat:no-repeat!important; } /* keep actual cat art centered in its card */ #person img.personArt{ width:auto!important; height:auto!important; max-width:88%!important; max-height:78%!important; left:50%!important; top:56%!important; transform:translate(-50%,-50%)!important; object-fit:contain!important; object-position:center center!important; } /* v113 — test newly uploaded mobile background on ball 4 only */ body[data-theme="4"] #app{ background-image: linear-gradient(180deg,rgba(3,5,10,.12) 0%,rgba(3,5,10,.18) 52%,rgba(3,5,10,.24) 100%), url("assets/36A139A2-E9A8-4C4B-9829-54FAB2F8302D.png?v=113")!important; background-size:100% 100%!important; background-position:center top!important; background-repeat:no-repeat!important; } /* v114 — two newly uploaded clean backgrounds for live comparison */ body[data-theme="4"] #app{ background-image: linear-gradient(180deg,rgba(3,5,10,.16) 0%,rgba(3,5,10,.20) 52%,rgba(3,5,10,.26) 100%), url("assets/08476FFD-F300-4EA5-91E6-0562E1FB31B7.png?v=114")!important; background-size:100% 100%!important; background-position:center top!important; background-repeat:no-repeat!important; } body[data-theme="5"] #app{ background-image: linear-gradient(180deg,rgba(3,5,10,.16) 0%,rgba(3,5,10,.20) 52%,rgba(3,5,10,.26) 100%), url("assets/48294DC9-D6BA-4298-999E-0F1960C102E2.png?v=114")!important; background-size:100% 100%!important; background-position:center top!important; background-repeat:no-repeat!important; } /* v115 — mobile framing: preserve artwork proportions and center composition */ body[data-theme="4"] #app, body[data-theme="5"] #app{ background-size:cover!important; background-position:center center!important; background-repeat:no-repeat!important; } /* keep important middle of each artwork behind the game stack */ body[data-theme="4"] #app{background-position:50% 50%!important} body[data-theme="5"] #app{background-position:50% 50%!important} /* composition closer to approved mockup: compact centered card stack */ #life .scene{ flex:0 0 clamp(270px,34vh,340px)!important; height:clamp(270px,34vh,340px)!important; } #person .heroCard:before, #person .heroPortrait{ left:14%!important; right:14%!important; top:7px!important; bottom:7px!important; } #person img.personArt{ width:auto!important; height:auto!important; max-width:88%!important; max-height:80%!important; left:50%!important; top:55%!important; transform:translate(-50%,-50%)!important; object-fit:contain!important; } #person .splide__track{ padding-left:12%!important; padding-right:12%!important; } #person .heroCard.splide__slide{ opacity:1!important; transform:scale(.88)!important; } #person .heroCard.splide__slide.is-active{ opacity:1!important; transform:scale(1)!important; } /* v116 — uploaded alternative background test on ball 2 */ body[data-theme="2"] #app{ background-image: linear-gradient(180deg,rgba(3,5,10,.14) 0%,rgba(3,5,10,.18) 52%,rgba(3,5,10,.24) 100%), url("assets/IMG_1641.png?v=116")!important; background-size:cover!important; background-position:center center!important; background-repeat:no-repeat!important; } /* v117 — new uploaded backgrounds on balls 3 and 4; ball 5 intentionally untouched */ body[data-theme="3"] #app{ background-image: linear-gradient(180deg,rgba(3,5,10,.12) 0%,rgba(3,5,10,.16) 52%,rgba(3,5,10,.22) 100%), url("assets/3A92A9B5-F1D6-4524-A133-0B9FE628E812.png?v=117")!important; background-size:cover!important; background-position:center center!important; background-repeat:no-repeat!important; } body[data-theme="4"] #app{ background-image: linear-gradient(180deg,rgba(3,5,10,.12) 0%,rgba(3,5,10,.16) 52%,rgba(3,5,10,.22) 100%), url("assets/IMG_1643.png?v=117")!important; background-size:cover!important; background-position:center center!important; background-repeat:no-repeat!important; } /* v118 — carousel symmetry: exact center both directions + correct arrow direction */ #person .splide__track{ padding-left:12%!important; padding-right:12%!important; } #person .heroPrev svg{transform:rotate(180deg)!important} #person .heroNext svg{transform:none!important} /* v119 — exact visual centering of active carousel card */ #person .heroCard.splide__slide.is-active{ position:relative!important; left:-4%!important; } /* v120 — center the whole carousel coordinate system, not individual active slide */ #person .heroCard.splide__slide.is-active{ left:auto!important; position:relative!important; } #person.heroDeck.splide{ width:100%!important; margin-left:0!important; left:0!important; transform:none!important; } #person .splide__track{ width:100%!important; box-sizing:border-box!important; padding-left:12%!important; padding-right:12%!important; } #person .heroArrows{ left:0!important; right:0!important; width:100%!important; } #person .heroPrev{left:7%!important} #person .heroNext{right:7%!important} /* v121 — deterministic carousel centering at both ends/directions */ #person .splide__track{ padding-left:12%!important; padding-right:12%!important; } #person .heroCard.splide__slide, #person .heroCard.splide__slide.is-active{ left:auto!important; right:auto!important; margin-left:0!important; margin-right:0!important; } /* v125 — collection albums */ #cats .catsGrid{display:block!important} #cats .catAlbum{ margin:14px 0 22px!important; padding:14px!important; border:1px solid rgba(216,170,76,.38)!important; border-radius:22px!important; background:linear-gradient(145deg,rgba(24,19,20,.96),rgba(8,11,20,.96))!important; box-shadow:0 12px 32px rgba(0,0,0,.35),inset 0 0 28px rgba(145,92,29,.08)!important; } #cats .catAlbumHead{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;margin-bottom:14px!important;padding:2px 4px 10px!important;border-bottom:1px solid rgba(218,174,82,.2)!important} #cats .catAlbumHead small{display:block!important;font-size:9px!important;letter-spacing:3px!important;color:#8e8b93!important} #cats .catAlbumHead h3{margin:2px 0 0!important;font-family:Georgia,serif!important;font-size:28px!important;letter-spacing:4px!important;color:#f0c66d!important} #cats .catAlbumHead span{font-size:9px!important;letter-spacing:2px!important;color:#9b7b52!important} #cats .catAlbumHead b{font-size:11px!important;color:#d6b568!important;letter-spacing:1px!important} #cats .catAlbumGrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important} #cats .mafiaCard{border-color:rgba(231,185,88,.72)!important;background:linear-gradient(180deg,rgba(37,31,32,.98),rgba(8,10,15,.98))!important;box-shadow:0 0 18px rgba(212,155,48,.14)!important} #cats .catCollectName{text-align:center!important;font-family:Georgia,serif!important;font-weight:700!important;letter-spacing:2px!important;color:#e9c36f!important;padding:5px 0 2px!important} /* v132 — collection folders */ #cats .albumFolders{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;margin:14px 0 24px!important} #cats .albumFolder{appearance:none!important;border:0!important;background:transparent!important;padding:0!important;text-align:left!important;min-width:0!important} #cats .folderCover{position:relative!important;height:245px!important;overflow:hidden!important;border-radius:22px!important;border:1px solid rgba(255,255,255,.16)!important;background:#0b0d15!important;box-shadow:0 14px 30px rgba(0,0,0,.38)!important} #cats .albumFolder.mafia .folderCover{border-color:rgba(226,178,75,.7)!important;box-shadow:0 0 20px rgba(220,160,48,.15),0 14px 30px rgba(0,0,0,.4)!important} #cats .albumFolder.street-hustle .folderCover{border-color:rgba(151,104,208,.68)!important} #cats .folderCover:before{content:""!important;position:absolute!important;left:0!important;top:0!important;width:62%!important;height:18px!important;border-radius:18px 18px 0 0!important;background:rgba(45,39,43,.98)!important;z-index:3!important} #cats .folderCover img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center 35%!important;padding:18px 6px 58px!important} #cats .folderShade{position:absolute!important;inset:0!important;background:linear-gradient(180deg,transparent 35%,rgba(4,5,10,.94) 82%)!important} #cats .folderTitle{position:absolute!important;z-index:4!important;left:12px!important;right:12px!important;bottom:12px!important} #cats .folderTitle h3{margin:0!important;font-family:Georgia,serif!important;font-size:20px!important;letter-spacing:1.5px!important;color:#f0c66d!important;line-height:1.05!important} #cats .street-hustle .folderTitle h3{font-family:inherit!important;font-size:17px!important;color:#fff!important;font-weight:900!important} #cats .folderTitle span{display:block!important;margin-top:5px!important;font-size:7px!important;letter-spacing:1px!important;color:#b6a7a0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} #cats .folderTitle b{display:block!important;margin-top:7px!important;font-size:10px!important;color:#e9bb56!important} #cats .albumBack{margin:0 0 10px!important;padding:8px 12px!important;border:1px solid rgba(224,181,91,.35)!important;border-radius:12px!important;background:rgba(7,10,18,.8)!important;color:#e8c36f!important;font-weight:800!important;letter-spacing:1px!important} #cats .openAlbum{margin-top:12px!important} @media(max-width:390px){#cats .folderCover{height:220px!important}#cats .folderTitle h3{font-size:18px!important}} /* v137 — hero carousel centering */ #person.heroDeck{width:100%!important;left:0!important;right:0!important;margin-left:auto!important;margin-right:auto!important;overflow:hidden!important} #person .splide__track{overflow:visible!important} #person .splide__list{align-items:center!important} #person .heroCard{transform:none!important;margin-left:0!important;margin-right:0!important} #person .heroCard.is-active{transform:none!important} #person .heroPortrait{left:0!important;right:0!important;margin-left:auto!important;margin-right:auto!important} #person .heroArrow{position:absolute!important;z-index:20!important} /* v138 — strict carousel center */ #person.heroDeck{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important} #person .splide__track{width:100%!important;padding-left:0!important;padding-right:0!important} #person .splide__list{width:100%!important} #person .heroCard{width:76%!important;flex:0 0 76%!important;margin:0 12%!important} #person .heroCard.is-active{margin-left:12%!important;margin-right:12%!important} /* v139 — Swiper card module */ #person.heroDeck.swiper{position:relative!important;width:100%!important;overflow:hidden!important;padding:0!important;margin:0!important} #person .swiper-wrapper{align-items:center!important} #person .swiper-slide.heroCard{box-sizing:border-box!important;width:min(74vw,350px)!important;max-width:350px!important;min-width:0!important;margin:0!important;flex-shrink:0!important;transform:none!important} #person .swiper-slide.heroCard.swiper-slide-active{transform:none!important} #person .heroMeta{position:absolute!important;left:18px!important;right:18px!important;bottom:14px!important;display:grid!important;grid-template-columns:1fr auto!important;align-items:end!important;gap:2px 8px!important;z-index:6!important;pointer-events:none!important} #person .heroMeta small{font-size:13px!important;font-weight:900!important;letter-spacing:1px!important;color:#fff!important} #person .heroMeta span{font-size:8px!important;letter-spacing:1.2px!important;color:#9da4b8!important} #person .heroMeta b{grid-column:1/3!important;font-size:9px!important;letter-spacing:1.5px!important;color:#c6cada!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} #person .heroArrow{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;width:54px!important;height:54px!important;border-radius:50%!important;border:1px solid rgba(129,146,188,.42)!important;background:rgba(7,12,27,.86)!important;color:#fff!important;font-size:42px!important;line-height:44px!important;z-index:30!important} #person .heroPrev{left:10px!important}.heroNext{right:10px!important} #person .swiper-button-disabled{opacity:.3!important} /* v140 — clean centered Swiper cards + contained metadata */ #person.heroDeck.swiper{height:450px!important;overflow:hidden!important} #person .swiper-wrapper{height:100%!important;align-items:center!important} #person .swiper-slide.heroCard{ position:relative!important; width:min(72vw,330px)!important; height:430px!important; max-width:330px!important; margin:0!important; flex:0 0 auto!important; overflow:hidden!important; opacity:.42!important; transform:scale(.92)!important; transition:transform .28s ease,opacity .28s ease!important } #person .swiper-slide.heroCard.swiper-slide-active{opacity:1!important;transform:scale(1)!important} #person .heroPortrait{position:absolute!important;left:10px!important;right:10px!important;top:38px!important;bottom:76px!important;width:auto!important;height:auto!important;overflow:hidden!important} #person img.personArt{max-width:94%!important;max-height:94%!important;top:50%!important} #person .heroMeta{ position:absolute!important;left:18px!important;right:18px!important;bottom:15px!important; display:block!important;height:48px!important;padding:0!important;z-index:8!important; border-top:1px solid rgba(255,255,255,.09)!important } #person .heroMetaTop{display:flex!important;align-items:center!important;justify-content:space-between!important;padding-top:8px!important} #person .heroMeta small{font-size:12px!important;font-weight:900!important;letter-spacing:1px!important;color:#fff!important} #person .heroMeta span{font-size:9px!important;letter-spacing:1.1px!important;color:#aeb5c8!important} #person .heroMeta b{display:block!important;margin-top:5px!important;font-size:9px!important;letter-spacing:1.3px!important;color:#cbd0df!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} #person .heroArrow{top:50%!important} /* v141 — restore compact card proportions, keep Swiper mechanics */ #person.heroDeck.swiper{height:430px!important;overflow:hidden!important;margin:0!important;padding:0!important} #person .swiper-wrapper{height:430px!important;align-items:center!important} #person .swiper-slide.heroCard{ position:relative!important; width:min(68vw,315px)!important; height:410px!important; max-width:315px!important; margin:0!important; flex:0 0 auto!important; overflow:hidden!important; opacity:.38!important; transform:scale(.92)!important } #person .swiper-slide.heroCard.swiper-slide-active{opacity:1!important;transform:scale(1)!important} #person .heroPortrait{position:absolute!important;inset:34px 8px 28px!important;width:auto!important;height:auto!important;overflow:hidden!important} #person img.personArt{max-width:94%!important;max-height:94%!important;top:50%!important} #person .heroMeta{display:none!important} #person .heroArrow{top:50%!important} /* v142 — native Life Dynasty card slider, no external library */ #person.nativeDeck{position:relative!important;width:100%!important;height:420px!important;overflow:visible!important;margin:0!important;padding:0!important} #person .heroViewport{position:absolute!important;inset:0!important;overflow:hidden!important;touch-action:pan-y!important} #person .heroTrack{position:absolute!important;left:0!important;top:0!important;height:100%!important;display:flex!important;align-items:center!important;gap:14px!important;will-change:transform!important;touch-action:pan-y!important} #person .heroCard{position:relative!important;width:min(70vw,320px)!important;height:400px!important;flex:0 0 min(70vw,320px)!important;margin:0!important;overflow:hidden!important;opacity:.32!important;transform:scale(.9)!important;transition:opacity .25s ease,transform .25s ease!important} #person .heroCard.active{opacity:1!important;transform:scale(1)!important} #person .heroPortrait{position:absolute!important;inset:36px 8px 54px!important;width:auto!important;height:auto!important;overflow:hidden!important} #person img.personArt{max-width:94%!important;max-height:94%!important;top:50%!important} #person .cardInfo{position:absolute!important;left:16px!important;right:16px!important;bottom:15px!important;display:flex!important;justify-content:space-between!important;align-items:center!important;z-index:8!important} #person .cardInfo b{font-size:12px!important;color:#fff!important;letter-spacing:1px!important} #person .cardInfo span{font-size:9px!important;color:#aeb5c8!important;letter-spacing:1px!important} #person .heroArrow{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;z-index:30!important} #person .heroPrev{left:10px!important}#person .heroNext{right:10px!important} /* v143 — measured centering: every card uses its real DOM center */ #person.nativeDeck .heroTrack{left:0!important;transform:none} #person.nativeDeck .heroCard{flex:0 0 min(70vw,320px)!important;margin:0!important} /* v144 — final card proportions after v143 centering */ #person.nativeDeck{height:390px!important} #person .heroViewport{height:390px!important} #person .heroTrack{height:390px!important} #person .heroCard{ width:min(66vw,300px)!important; height:370px!important; flex-basis:min(66vw,300px)!important; border-radius:34px!important } #person .heroPortrait{ inset:42px 12px 42px!important; display:flex!important; align-items:center!important; justify-content:center!important } #person img.personArt{ position:relative!important; left:auto!important; top:auto!important; transform:none!important; width:auto!important; height:auto!important; max-width:92%!important; max-height:92%!important; object-fit:contain!important; object-position:center!important } #person .rarity{top:18px!important;right:14px!important} #person .cardInfo{bottom:13px!important} #person .heroArrow{width:50px!important;height:50px!important;font-size:38px!important} /* v145 — keep every rarity equally visible and consistently sized */ #person.nativeDeck{height:410px!important} #person .heroViewport,#person .heroTrack{height:410px!important} #person .heroCard{ width:min(70vw,320px)!important; height:390px!important; flex-basis:min(70vw,320px)!important; opacity:.55!important; transform:scale(.94)!important; } #person .heroCard.active{opacity:1!important;transform:scale(1)!important} #person .heroPortrait{inset:38px 8px 38px!important} #person img.personArt{ position:absolute!important; left:50%!important;top:50%!important; transform:translate(-50%,-50%)!important; width:92%!important;height:92%!important; max-width:none!important;max-height:none!important; object-fit:contain!important;object-position:center!important; opacity:1!important } #person .heroCard.active img.personArt{opacity:1!important} /* v146 — active card must never inherit dim/scale state */ #person.nativeDeck .heroCard{opacity:.42!important;transform:scale(.92)!important} #person.nativeDeck .heroCard.active{ opacity:1!important; transform:scale(1)!important; filter:none!important; visibility:visible!important } #person.nativeDeck .heroCard.active .heroPortrait, #person.nativeDeck .heroCard.active img.personArt, #person.nativeDeck .heroCard.active .rarity{ opacity:1!important; filter:none!important; visibility:visible!important } #person.nativeDeck .heroCard.active img.personArt{ width:auto!important;height:auto!important; max-width:96%!important;max-height:96%!important } /* v147 — stable first paint + no art clipping */ #person.nativeDeck .heroCard{overflow:visible!important} #person.nativeDeck .heroPortrait{overflow:visible!important} #person.nativeDeck .heroViewport{overflow:hidden!important} #person.nativeDeck .heroCard.active{ opacity:1!important; transform:scale(1)!important; filter:none!important } #person.nativeDeck .heroCard.active img.personArt{ opacity:1!important; width:auto!important;height:auto!important; max-width:90%!important;max-height:88%!important; object-fit:contain!important } /* v148 — frame-only adjustment; preserve v147 cat size/position/slider */ #person.nativeDeck .heroCard{ width:min(76vw,350px)!important; height:405px!important; flex-basis:min(76vw,350px)!important; border-radius:34px!important; } #person.nativeDeck .heroCard:before{ inset:8px!important; border-radius:30px!important; } #person.nativeDeck .heroCard .rarity{ right:12px!important; top:16px!important; } /* v149 — frame background fills the top gap; slider/cat geometry untouched */ #person.nativeDeck .heroCard{ background:var(--card-bg,rgba(13,16,27,.92))!important; } #person.nativeDeck .heroCard.common{background:linear-gradient(180deg,rgba(39,43,52,.96),rgba(17,20,29,.96))!important} #person.nativeDeck .heroCard.uncommon{background:linear-gradient(180deg,rgba(27,55,48,.96),rgba(13,28,25,.96))!important} #person.nativeDeck .heroCard.epic{background:linear-gradient(180deg,rgba(47,35,61,.96),rgba(25,19,34,.96))!important} #person.nativeDeck .heroCard.legendary{background:linear-gradient(180deg,rgba(64,52,29,.96),rgba(30,25,16,.96))!important} #person.nativeDeck .heroCard.mythic{background:linear-gradient(180deg,rgba(65,29,38,.96),rgba(31,16,22,.96))!important} #person.nativeDeck .heroPortrait{background:transparent!important} /* v152 — cat artwork only: 1% smaller */ #person.nativeDeck .heroCard.active img.personArt{ max-width:89.1%!important; max-height:87.12%!important; } /* v153 — cat artwork 2% smaller than v149 baseline */ #person.nativeDeck .heroCard.active img.personArt{ max-width:88.2%!important; max-height:86.24%!important; } /* v154 — cat artwork 4% smaller than v149 baseline */ #person.nativeDeck .heroCard.active img.personArt{ max-width:86.4%!important; max-height:84.48%!important; } /* v155 — card stats top-left */ #person.nativeDeck .cardStatsTop{ position:absolute!important; top:16px!important; left:14px!important; z-index:12!important; display:flex!important; flex-direction:column!important; align-items:flex-start!important; gap:2px!important; pointer-events:none!important; text-align:left!important; } #person.nativeDeck .cardStatsTop b{ font-size:12px!important; line-height:1.05!important; letter-spacing:.8px!important; color:#fff!important; } #person.nativeDeck .cardStatsTop span{ font-size:8px!important; line-height:1.1!important; letter-spacing:.65px!important; color:#aeb5c8!important; } #person.nativeDeck .cardStatsTop em{ margin-top:2px!important; font-style:normal!important; font-size:10px!important; line-height:1.1!important; font-weight:800!important; letter-spacing:.45px!important; color:#fff!important; } /* v156 — refined top-left card metadata */ #person.nativeDeck .cardStatsTop{ top:17px!important; left:22px!important; gap:3px!important; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif!important; } #person.nativeDeck .cardStatsTop b{ font-family:inherit!important; font-size:12px!important; font-weight:800!important; line-height:1.05!important; letter-spacing:1.15px!important; color:#fff!important; text-shadow:0 1px 8px rgba(0,0,0,.5)!important; } #person.nativeDeck .cardStatsTop span{ font-family:inherit!important; font-size:8.5px!important; font-weight:600!important; line-height:1.1!important; letter-spacing:1px!important; color:rgba(224,228,239,.72)!important; } #person.nativeDeck .cardStatsTop em{ font-family:inherit!important; margin-top:3px!important; font-size:10.5px!important; font-weight:800!important; line-height:1.05!important; letter-spacing:.9px!important; color:#fff!important; text-shadow:0 1px 8px rgba(0,0,0,.5)!important; } /* v157 — force visible metadata reposition/type change */ #person.nativeDeck .heroCard .cardStatsTop{ top:18px!important; left:30px!important; transform:none!important; width:auto!important; font-family:Georgia,"Times New Roman",serif!important; } #person.nativeDeck .heroCard .cardStatsTop b{ font-family:Georgia,"Times New Roman",serif!important; font-size:13px!important; font-weight:700!important; letter-spacing:1.6px!important; } #person.nativeDeck .heroCard .cardStatsTop span{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important; font-size:8px!important; font-weight:600!important; letter-spacing:1.25px!important; } #person.nativeDeck .heroCard .cardStatsTop em{ font-family:Georgia,"Times New Roman",serif!important; font-size:11px!important; font-weight:700!important; letter-spacing:1.25px!important; } /* v158 — collection logo under card stats */ #person.nativeDeck .collectionMark{ margin-top:9px!important; display:flex!important; flex-direction:column!important; align-items:center!important; width:76px!important; line-height:1!important; text-align:center!important; opacity:.9!important; } #person.nativeDeck .collectionMark i{ font-family:Georgia,"Times New Roman",serif!important; font-style:normal!important; font-size:17px!important; line-height:14px!important; color:#e4b55c!important; } #person.nativeDeck .collectionMark strong{ margin-top:3px!important; font-family:Georgia,"Times New Roman",serif!important; font-size:10px!important; font-weight:700!important; letter-spacing:1.5px!important; color:#e8bd6a!important; } #person.nativeDeck .collectionMark small{ margin-top:3px!important; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important; font-size:5px!important; font-weight:700!important; letter-spacing:1.4px!important; color:#c99e50!important; } #person.nativeDeck .collectionMark.street-hustle i{color:#e7e9ef!important} #person.nativeDeck .collectionMark.street-hustle strong, #person.nativeDeck .collectionMark.street-hustle small{color:#d9dde8!important} /* v164 — clean collection metadata block */ #person.nativeDeck .heroCard .cardStatsTop{ top:22px!important;left:30px!important;width:108px!important; gap:5px!important;align-items:flex-start!important; } #person.nativeDeck .collectionMark{ margin:0 0 3px 8px!important;width:78px!important; align-items:center!important;text-align:center!important; } #person.nativeDeck .collectionMark i{ font-size:17px!important;line-height:15px!important;color:#e4b55c!important; } #person.nativeDeck .collectionMark strong{ margin-top:4px!important;font-family:Georgia,"Times New Roman",serif!important; font-size:11px!important;line-height:1!important;letter-spacing:1.8px!important;color:#e8bd6a!important; } #person.nativeDeck .cardStatsTop>span.cardId, #person.nativeDeck .cardStatsTop>em.cardLdn{ margin:0!important;width:108px!important;height:16px!important; display:grid!important;grid-template-columns:16px 1fr!important;align-items:center!important; column-gap:5px!important;font-style:normal!important;white-space:nowrap!important; } #person.nativeDeck .cardStatsTop .cardId i, #person.nativeDeck .cardStatsTop .cardLdn i{ display:block!important;width:16px!important;text-align:center!important; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important; font-style:normal!important;font-size:11px!important;line-height:16px!important; color:#e5b75f!important; } #person.nativeDeck .cardStatsTop .cardId b{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important; font-size:8.5px!important;font-weight:650!important;line-height:16px!important; letter-spacing:1px!important;color:rgba(224,228,239,.76)!important; } #person.nativeDeck .cardStatsTop .cardLdn b{ font-family:Georgia,"Times New Roman",serif!important; font-size:11px!important;font-weight:700!important;line-height:16px!important; letter-spacing:1.1px!important;color:#fff!important;text-shadow:0 1px 8px rgba(0,0,0,.5)!important; } /* v165 — reference-style metadata alignment */ #person.nativeDeck .heroCard .cardStatsTop{top:24px!important;left:32px!important;width:116px!important;gap:3px!important} #person.nativeDeck .collectionMark{margin:0 0 6px 8px!important;width:82px!important} #person.nativeDeck .collectionMark i{font-size:18px!important;line-height:16px!important} #person.nativeDeck .collectionMark strong{font-size:11px!important;line-height:13px!important;letter-spacing:1.9px!important} #person.nativeDeck .cardStatsTop>span.cardId,#person.nativeDeck .cardStatsTop>em.cardLdn{ width:116px!important;height:18px!important;grid-template-columns:19px 1fr!important;column-gap:5px!important } #person.nativeDeck .cardStatsTop .cardId i,#person.nativeDeck .cardStatsTop .cardLdn i{ width:19px!important;height:18px!important;line-height:18px!important;font-size:12px!important;color:#e8b95d!important } #person.nativeDeck .cardStatsTop .cardId b{font-size:8.5px!important;line-height:18px!important;letter-spacing:1.15px!important} #person.nativeDeck .cardStatsTop .cardLdn b{font-size:11px!important;line-height:18px!important;letter-spacing:1.15px!important} #person.nativeDeck .cardStatsTop .idIcon{font-size:13px!important;transform:scaleX(.92)!important} #person.nativeDeck .cardStatsTop .ldnIcon{font-size:10px!important;transform:rotate(90deg)!important} /* v166 vector metadata icons */ #person.nativeDeck .cardStatsTop .idIcon svg,#person.nativeDeck .cardStatsTop .ldnIcon svg{width:14px!important;height:14px!important;display:block!important;fill:none!important;stroke:#e8b95d!important;stroke-width:1.7!important;stroke-linecap:round!important;stroke-linejoin:round!important} #person.nativeDeck .cardStatsTop .idIcon,#person.nativeDeck .cardStatsTop .ldnIcon{display:flex!important;align-items:center!important;justify-content:center!important;transform:none!important} /* v167 — compact metadata tucked into card corner */ #person.nativeDeck .heroCard .cardStatsTop{ top:20px!important;left:22px!important;width:100px!important;gap:2px!important; transform:scale(.88)!important;transform-origin:top left!important; } #person.nativeDeck .collectionMark{margin:0 0 4px 5px!important;width:76px!important} #person.nativeDeck .collectionMark i{font-size:16px!important;line-height:14px!important} #person.nativeDeck .collectionMark strong{font-size:10px!important;line-height:12px!important;letter-spacing:1.7px!important} #person.nativeDeck .cardStatsTop>span.cardId,#person.nativeDeck .cardStatsTop>em.cardLdn{ width:105px!important;height:16px!important;grid-template-columns:17px 1fr!important;column-gap:4px!important } #person.nativeDeck .cardStatsTop .idIcon svg,#person.nativeDeck .cardStatsTop .ldnIcon svg{width:12px!important;height:12px!important} #person.nativeDeck .cardStatsTop .cardId b{font-size:8px!important;line-height:16px!important;letter-spacing:1px!important} #person.nativeDeck .cardStatsTop .cardLdn b{font-size:10.5px!important;line-height:16px!important;letter-spacing:1px!important} /* v168 — remove obsolete inner card layer, keep main card frame */ #person.nativeDeck .heroCard:before, #person.nativeDeck .heroCard::before{ content:none!important; display:none!important; background:none!important; border:0!important; box-shadow:none!important; } /* v169 — restore rarity inner frame removed in v168; remove portrait backing layer instead */ #person.nativeDeck .heroCard:before, #person.nativeDeck .heroCard::before{ content:""!important; display:block!important; position:absolute!important; inset:8px!important; border:2px solid currentColor!important; border-radius:30px!important; background:transparent!important; box-shadow:0 0 24px color-mix(in srgb,currentColor 38%,transparent)!important; pointer-events:none!important; z-index:3!important; } #person.nativeDeck .heroPortrait{ background:none!important; background-color:transparent!important; background-image:none!important; border:0!important; box-shadow:none!important; outline:0!important; } body[data-theme] #person.nativeDeck .heroPortrait{ background:none!important; background-image:none!important; background-color:transparent!important; } /* v174 — remove legacy portrait overlay only */ #person .heroPortrait:after, #person .heroPortrait::after{ content:none!important; display:none!important; background:none!important; } /* v180 — depot artifact info bottom sheet */ .artifactInfoSheet{position:fixed;inset:0;z-index:8500;pointer-events:none;background:transparent;transition:background .2s ease} .artifactInfoSheet.open{pointer-events:auto;background:rgba(4,7,13,.24)} .artifactInfoPanel{position:absolute;left:10px;right:10px;bottom:calc(76px + env(safe-area-inset-bottom));display:grid;grid-template-columns:58px 1fr;gap:12px;padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:rgba(15,18,28,.96);box-shadow:0 -10px 35px rgba(0,0,0,.38);backdrop-filter:blur(18px);transform:translateY(calc(100% + 100px));opacity:0;transition:transform .22s ease,opacity .18s ease} .artifactInfoSheet.open .artifactInfoPanel{transform:translateY(0);opacity:1} .artifactInfoIcon{width:58px;height:58px;display:grid;place-items:center;font-size:36px;border-radius:16px;background:rgba(255,255,255,.06);color:#e8c96d} .artifactInfoIcon svg{width:44px;height:44px} .artifactInfoText{display:flex;min-width:0;flex-direction:column;gap:2px} .artifactInfoText small{font-size:9px;letter-spacing:1.6px;opacity:.55} .artifactInfoText b{font-size:14px} .artifactInfoText span{font-size:12px;opacity:.72} .artifactInfoText strong{margin-top:2px;font-size:15px;color:#e8c96d} .artifactInfoActions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.25fr;gap:8px;margin-top:2px} .artifactInfoActions button{height:42px;border:0;border-radius:13px;font-weight:800;font-size:11px;letter-spacing:.7px} #artifactInfoCancel{background:rgba(255,255,255,.07);color:#fff} #artifactInfoOpen{background:#e8c96d;color:#17130a} /* v185 — custom depot PNG icons stay inside cells */ #mergeBoard .artifactCell span{width:100%!important;height:calc(100% - 16px)!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;line-height:1!important} #mergeBoard .artifactCell span img{display:block!important;width:82%!important;height:82%!important;max-width:58px!important;max-height:58px!important;object-fit:contain!important;object-position:center!important;pointer-events:none!important;-webkit-user-drag:none!important} #artifactInfoIcon img{display:block!important;width:88%!important;height:88%!important;object-fit:contain!important;pointer-events:none!important} /* v186 — custom PNGs inside tap-drop animation and depot queue */ .artifactFly span{width:52px!important;height:44px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important} .artifactFly span img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;pointer-events:none!important;-webkit-user-drag:none!important} .artifactQueue i{overflow:hidden!important} .artifactQueue i img{display:block!important;width:86%!important;height:86%!important;object-fit:contain!important;pointer-events:none!important} /* v187 — fix PNG size in actual feed reward popup */ .artifactReward span{width:62px!important;height:58px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;font-size:38px!important;line-height:1!important} .artifactReward span img{display:block!important;width:56px!important;height:56px!important;max-width:56px!important;max-height:56px!important;object-fit:contain!important;object-position:center!important;pointer-events:none!important;-webkit-user-drag:none!important} /* v189 — Depot nav glow when an artifact lands */ nav button[data-page="depot"].depotCatch{position:relative!important;color:#ffd45f!important;animation:depotNavCatch189 .72s ease-out!important} nav button[data-page="depot"].depotCatch:after{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;border-radius:50%;transform:translate(-50%,-50%) scale(.35);background:radial-gradient(circle,rgba(255,214,91,.42) 0%,rgba(181,108,255,.20) 48%,transparent 72%);pointer-events:none;animation:depotNavHalo189 .72s ease-out!important} nav button[data-page="depot"].depotCatch span{text-shadow:0 0 8px rgba(255,211,84,.95),0 0 18px rgba(181,108,255,.65)!important} @keyframes depotNavCatch189{0%{transform:scale(1)}38%{transform:scale(1.12);filter:brightness(1.45)}100%{transform:scale(1);filter:brightness(1)}} @keyframes depotNavHalo189{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.65)}} /* v209 — full quest center */ #tasks{overflow-y:auto!important;padding:18px 18px 110px!important} #tasks .pageTitle{margin-bottom:12px} .questTop{display:flex;align-items:center;justify-content:space-between;padding:12px 13px;margin-bottom:10px;border:1px solid #2a3042;border-radius:15px;background:linear-gradient(145deg,#111725,#0c111d)} .questTop small{display:block;font-size:8px;letter-spacing:1.6px;color:#8f96aa}.questTop b{display:block;margin-top:3px;font-size:10px;color:#fff}.questTop>strong{font-size:9px;color:#f3bd43} .questTabs{display:flex;gap:7px;overflow-x:auto;padding:1px 0 10px;scrollbar-width:none}.questTabs::-webkit-scrollbar{display:none} .questTabs button{flex:0 0 auto;border:1px solid #2b3042;border-radius:20px;background:#111624;color:#7f879b;padding:8px 11px;font-size:8px;font-weight:900;letter-spacing:.8px} .questTabs button.on{color:#15100a;border-color:#e5b544;background:linear-gradient(180deg,#ffd65b,#e8aa2d);box-shadow:0 0 14px rgba(238,181,58,.2)} .questList{display:grid!important;gap:9px!important} .questCard{display:grid!important;grid-template-columns:38px 1fr auto!important;align-items:center!important;gap:10px!important;padding:11px!important;border:1px solid #272d3e!important;border-radius:15px!important;background:linear-gradient(145deg,#121725,#0d121e)!important} .questIcon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:#1a2030;border:1px solid #30384c;font-size:16px;font-weight:900;color:#d5a944} .questBody>b{display:block;font-size:10px;line-height:1.25;color:#f4f5f8}.questMeta{display:flex;justify-content:space-between;margin-top:5px;font-size:8px;color:#8d94a6}.questMeta strong{color:#d7b14e} .questBar{height:4px;margin-top:6px;overflow:hidden;border-radius:6px;background:#252b3a}.questBar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#6f4cf0,#d49bff)} .questCard.done{border-color:#665024;box-shadow:inset 2px 0 #e6b33e}.questCard.claimed{opacity:.6} .questClaim{border:0;border-radius:10px;padding:9px 8px;background:linear-gradient(180deg,#ffd65b,#e8aa2d);font-size:7px;font-weight:1000;color:#171008}.questClaim:disabled{background:#252b39;color:#777f92} /* v212 — brighter Depot board, larger artifact art, compact LV */ #mergeBoard.artifactBoard{ background: radial-gradient(circle at 18% 12%,rgba(72,115,255,.18),transparent 30%), radial-gradient(circle at 82% 82%,rgba(198,73,255,.16),transparent 34%), linear-gradient(145deg,#141a31 0%,#202040 46%,#281a3e 100%)!important; border-color:rgba(121,104,190,.48)!important; box-shadow:inset 0 0 36px rgba(109,73,190,.12),0 14px 38px rgba(0,0,0,.22)!important; } #mergeBoard .artifactCell:not(.empty){ background:linear-gradient(145deg,rgba(42,42,75,.96),rgba(26,29,52,.98))!important; border-color:rgba(135,124,190,.38)!important; box-shadow:inset 0 1px rgba(255,255,255,.04),0 5px 14px rgba(0,0,0,.18)!important; } #mergeBoard .artifactCell span{height:calc(100% - 11px)!important;overflow:visible!important} #mergeBoard .artifactCell span img{width:96%!important;height:96%!important;max-width:72px!important;max-height:72px!important;filter:drop-shadow(0 3px 5px rgba(0,0,0,.28))!important} #mergeBoard .artifactCell b{font-size:8px!important;line-height:9px!important;letter-spacing:.3px!important;margin-top:-3px!important;opacity:.72!important} #mergeBoard .artifactCell.mergeBorn{z-index:80!important;animation:mergeCell212 .78s cubic-bezier(.2,.9,.2,1)!important} #mergeBoard .artifactCell.mergeBorn span{animation:mergeIcon212 .78s cubic-bezier(.18,.9,.22,1)!important} #mergeBoard .artifactCell.mergeBorn:after{ content:"";position:absolute;inset:-8px;border-radius:18px;pointer-events:none; background:radial-gradient(circle,rgba(255,225,115,.65) 0%,rgba(157,93,255,.34) 38%,transparent 70%); animation:mergeBurst212 .78s ease-out!important } @keyframes mergeCell212{0%{transform:scale(.72)}36%{transform:scale(1.18)}62%{transform:scale(.96)}100%{transform:scale(1)}} @keyframes mergeIcon212{0%{filter:brightness(2.2) drop-shadow(0 0 16px #fff);transform:rotate(-7deg)}45%{filter:brightness(1.5) drop-shadow(0 0 13px #ffd65a);transform:rotate(5deg)}100%{filter:brightness(1);transform:rotate(0)}} @keyframes mergeBurst212{0%{opacity:0;transform:scale(.35)}30%{opacity:1;transform:scale(1.05)}100%{opacity:0;transform:scale(1.65)}} /* v213 — Depot synthesis toast directly below "СОБИРАЙ ЦЕПОЧКИ" */ #depot.active~#toast, body:has(#depot.active) #toast{ position:fixed!important; left:50%!important; top:326px!important; bottom:auto!important; width:calc(100% - 66px)!important; max-width:620px!important; box-sizing:border-box!important; transform:translate(-50%,-8px)!important; text-align:center!important; white-space:normal!important; z-index:9999!important; background:rgba(28,31,51,.96)!important; border:1px solid rgba(132,117,190,.42)!important; box-shadow:0 8px 24px rgba(0,0,0,.28)!important; backdrop-filter:blur(12px)!important; } body:has(#depot.active) #toast.show{transform:translate(-50%,0)!important} @media(max-height:750px){body:has(#depot.active) #toast{top:292px!important}} /* v214 — place the existing global toast visually in the gap under Depot HUD */ body:has(#depot.active) #toast{ position:absolute!important; left:32px!important;right:32px!important;top:474px!important;bottom:auto!important; width:auto!important;max-width:none!important;margin:0!important; transform:translateY(-8px)!important; z-index:9999!important; } body:has(#depot.active) #toast.show{transform:translateY(0)!important} @media(max-width:430px){body:has(#depot.active) #toast{left:32px!important;right:32px!important;top:474px!important}} /* v215 — synthesis message has its own reserved row above the board */ #depotToastAnchor{ display:block!important;height:0!important;min-height:0!important;overflow:visible!important; position:relative!important;z-index:120!important;text-align:center!important;pointer-events:none!important; color:#f4f3f8!important;font-size:11px!important;font-weight:700!important;letter-spacing:.1px!important; opacity:0!important;transform:translateY(-5px)!important;transition:opacity .18s ease,transform .18s ease!important; } #depotToastAnchor.show{ height:auto!important;min-height:34px!important;margin:6px 12px 7px!important;padding:9px 12px!important; box-sizing:border-box!important;border-radius:12px!important;opacity:1!important;transform:none!important; background:linear-gradient(90deg,rgba(31,35,58,.97),rgba(43,35,67,.97))!important; border:1px solid rgba(134,119,190,.42)!important;box-shadow:0 7px 20px rgba(0,0,0,.24)!important; } body:has(#depot.active) #toast{top:auto!important;bottom:96px!important;left:50%!important;right:auto!important;width:auto!important;max-width:none!important;transform:translate(-50%,15px)!important} body:has(#depot.active) #toast.show{transform:translate(-50%,0)!important} /* v216 — pin synthesis notice to the chain HUD, never inside the board */ #depot .artifactHUD{position:relative!important;z-index:130!important;overflow:visible!important} #depot .artifactHUD #depotToastAnchor{ position:absolute!important;left:10px!important;right:10px!important;top:calc(100% + 6px)!important; width:auto!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important; opacity:0!important;transform:translateY(-5px)!important;z-index:200!important; } #depot .artifactHUD #depotToastAnchor.show{ min-height:34px!important;padding:9px 12px!important;opacity:1!important;transform:none!important; } #depot:has(#depotToastAnchor.show) #mergeBoard{margin-top:47px!important} #depot #mergeBoard{transition:margin-top .16s ease!important} /* v217 — fixed reserved synthesis status slot; board never jumps */ #depot .artifactHUD{margin-bottom:48px!important} #depot .artifactHUD #depotToastAnchor{ position:absolute!important;left:10px!important;right:10px!important;top:calc(100% + 6px)!important; height:36px!important;min-height:36px!important;margin:0!important;padding:9px 12px!important; box-sizing:border-box!important;border-radius:12px!important; background:linear-gradient(90deg,rgba(31,35,58,.72),rgba(43,35,67,.72))!important; border:1px solid rgba(134,119,190,.22)!important;box-shadow:none!important; opacity:1!important;transform:none!important;color:transparent!important; display:flex!important;align-items:center!important;justify-content:center!important; } #depot .artifactHUD #depotToastAnchor.show{ height:36px!important;min-height:36px!important;margin:0!important;padding:9px 12px!important; color:#f4f3f8!important;opacity:1!important;transform:none!important; background:linear-gradient(90deg,rgba(31,35,58,.97),rgba(43,35,67,.97))!important; border-color:rgba(134,119,190,.42)!important;box-shadow:0 7px 20px rgba(0,0,0,.24)!important; } #depot:has(#depotToastAnchor.show) #mergeBoard,#depot #mergeBoard{margin-top:0!important} /* v218 — remove redundant Depot header and give the board the freed space */ #depot .depotTop{display:none!important} #depot.active{padding-top:8px!important} #depot .artifactHUD{margin-top:0!important} #depot #mergeBoard.artifactBoard{ flex:1 1 auto!important; min-height:560px!important; max-height:none!important; } @media(min-height:780px){ #depot #mergeBoard.artifactBoard{min-height:610px!important} } @media(max-height:700px){ #depot #mergeBoard.artifactBoard{min-height:500px!important} } /* v219 — Depot 7 × 7 / 49 slots */ #depot #mergeBoard.artifactBoard{ display:grid!important; grid-template-columns:repeat(7,minmax(0,1fr))!important; grid-template-rows:repeat(7,minmax(0,1fr))!important; gap:5px!important; padding:8px!important; min-height:560px!important; aspect-ratio:1/1!important; height:auto!important; flex:0 0 auto!important; } #depot #mergeBoard .artifactCell{border-radius:11px!important} #depot #mergeBoard .artifactCell span{height:calc(100% - 9px)!important} #depot #mergeBoard .artifactCell span img{ width:100%!important;height:100%!important; max-width:54px!important;max-height:54px!important; } #depot #mergeBoard .artifactCell b{ font-size:6.5px!important;line-height:7px!important;margin-top:-2px!important; } @media(max-width:430px){ #depot #mergeBoard.artifactBoard{min-height:0!important;width:100%!important} #depot #mergeBoard .artifactCell span img{max-width:48px!important;max-height:48px!important} } /* v220 — Diamonds economy + purchasable Depot slots */ .money.economy4{grid-template-columns:repeat(4,1fr)!important} .money.economy4>div{min-width:0!important;padding:0 5px!important} .money.economy4 span{font-size:7px!important;letter-spacing:1.25px!important} .money.economy4 b{font-size:16px!important;white-space:nowrap!important} .money.economy4 i{font-style:normal!important} #depot #mergeBoard .artifactCell.locked{ cursor:pointer!important;position:relative!important; background:linear-gradient(145deg,rgba(8,11,21,.96),rgba(15,14,29,.98))!important; border:1px dashed rgba(111,103,151,.30)!important; box-shadow:inset 0 0 16px rgba(0,0,0,.38)!important; color:#69657e!important;opacity:.88!important } #depot #mergeBoard .artifactCell.locked .slotLock{ height:auto!important;width:auto!important;display:block!important;overflow:visible!important; font-size:12px!important;line-height:12px!important;color:#77708f!important;opacity:.72!important } #depot #mergeBoard .artifactCell.locked b{ display:block!important;margin-top:3px!important;font-size:7px!important;line-height:8px!important; color:#9a91b7!important;opacity:.78!important } #depot #mergeBoard .artifactCell.locked:active{transform:scale(.94)!important;border-color:#9f78ff!important} #depot #mergeBoard .artifactCell.empty{background:rgba(7,11,20,.92)!important} /* v222 — card capacity + dual-currency auction */ .cardSlotPanel,.auctionDemo{ margin:0 0 14px;padding:14px;border:1px solid rgba(120,126,170,.34);border-radius:16px; background:linear-gradient(145deg,rgba(18,24,43,.96),rgba(32,25,51,.96)); box-shadow:0 8px 24px rgba(0,0,0,.18) } .cardSlotPanel{display:flex;align-items:center;justify-content:space-between;gap:12px} .cardSlotPanel div{display:flex;flex-direction:column;gap:3px}.cardSlotPanel small,.auctionDemo small{font-size:8px;letter-spacing:1.5px;color:#999fb6} .cardSlotPanel b{font-size:20px}.cardSlotPanel span,.auctionDemo span{font-size:10px;color:#a9aec1} .cardSlotPanel button,.auctionDemo button{border:1px solid rgba(143,111,255,.55);border-radius:11px;background:#171c31;color:#fff;font-weight:800;font-size:9px;padding:10px 11px} .cardSlotPanel button:not(:disabled),#auctionDiamond{background:linear-gradient(135deg,#5b38cb,#a548e6)} .auctionDemo{display:flex;flex-direction:column;gap:8px}.auctionDemo>b{font-size:17px}.auctionDemo>div{display:grid;grid-template-columns:1fr 1.35fr;gap:8px} #auctionSilver:not(:disabled){background:linear-gradient(135deg,#ad7b24,#e3b54a);color:#17100a} #auctionSilver:disabled{opacity:.45} /* v223 — locked Depot slots preview our real artifacts */ #depot #mergeBoard .artifactCell.locked{ overflow:hidden!important; background:linear-gradient(145deg,rgba(10,13,25,.94),rgba(21,18,37,.96))!important; } #depot #mergeBoard .artifactCell.locked .lockedArtifact{ display:flex!important;align-items:center!important;justify-content:center!important; width:100%!important;height:calc(100% - 13px)!important;overflow:visible!important; opacity:.50!important;filter:saturate(.72) brightness(.78)!important; } #depot #mergeBoard .artifactCell.locked .lockedArtifact img{ width:94%!important;height:94%!important;max-width:48px!important;max-height:48px!important; object-fit:contain!important;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))!important; } #depot #mergeBoard .artifactCell.locked b{ position:absolute!important;left:2px!important;right:2px!important;bottom:3px!important; margin:0!important;font-size:6.5px!important;line-height:8px!important; color:#c6bddc!important;opacity:.92!important;text-align:center!important; } #depot #mergeBoard .artifactCell.locked:active .lockedArtifact{opacity:.72!important;transform:scale(1.06)!important} /* v224 — full-size Depot: no chain/info bars, keep exact 7×7 proportions */ #depot .artifactHUD,#depot #depotToastAnchor{display:none!important} #depot.active{padding-top:4px!important} #depot #mergeBoard.artifactBoard{ width:calc(100% - 8px)!important; max-width:760px!important; aspect-ratio:1 / 1!important; min-height:0!important; height:auto!important; margin:4px auto 10px!important; padding:8px!important; gap:5px!important; grid-template-columns:repeat(7,minmax(0,1fr))!important; grid-template-rows:repeat(7,minmax(0,1fr))!important; flex:0 0 auto!important; box-sizing:border-box!important; } #depot #mergeBoard .artifactCell{min-width:0!important;min-height:0!important} #depot #mergeBoard .artifactCell span img, #depot #mergeBoard .artifactCell.locked .lockedArtifact img{ max-width:none!important;max-height:none!important;width:96%!important;height:96%!important;object-fit:contain!important } #depot #mergeBoard .artifactCell b{font-size:7px!important;line-height:8px!important} @media(max-width:430px){ #depot #mergeBoard.artifactBoard{width:calc(100% - 2px)!important;margin-top:2px!important;padding:6px!important;gap:4px!important} } /* v225 — Depot design 1: Neon Safe */ #depot #mergeBoard.artifactBoard{ background: radial-gradient(circle at 50% 42%,rgba(40,78,255,.18),transparent 44%), linear-gradient(145deg,rgba(17,20,62,.98),rgba(29,18,72,.98) 55%,rgba(12,27,62,.98))!important; border:1px solid rgba(57,183,255,.78)!important; border-radius:24px!important; box-shadow:0 0 0 2px rgba(88,55,255,.22),0 0 24px rgba(0,136,255,.32),inset 0 0 28px rgba(95,50,255,.18)!important; gap:3px!important;padding:7px!important } #depot #mergeBoard .artifactCell{ border-radius:12px!important; border:1px solid rgba(79,129,255,.28)!important; background:linear-gradient(145deg,rgba(22,29,66,.82),rgba(14,19,47,.72))!important; box-shadow:inset 0 0 10px rgba(64,88,190,.12)!important; overflow:visible!important } #depot #mergeBoard .artifactCell.empty{ background:linear-gradient(145deg,rgba(11,17,43,.58),rgba(17,14,48,.50))!important; border-color:rgba(69,105,213,.18)!important; box-shadow:inset 0 0 12px rgba(0,0,0,.18)!important } #depot #mergeBoard .artifactCell:not(.empty):not(.locked){ border-color:rgba(66,157,255,.45)!important; box-shadow:inset 0 0 12px rgba(51,105,255,.16),0 0 7px rgba(54,117,255,.12)!important } #depot #mergeBoard .artifactCell span:not(.lockedArtifact){ width:100%!important;height:calc(100% - 7px)!important; display:flex!important;align-items:center!important;justify-content:center!important; overflow:visible!important } #depot #mergeBoard .artifactCell span:not(.lockedArtifact) img{ width:116%!important;height:116%!important;max-width:none!important;max-height:none!important; object-fit:contain!important;filter:drop-shadow(0 3px 4px rgba(0,0,0,.32)) saturate(1.16)!important; transform:translateY(-1px)!important } #depot #mergeBoard .artifactCell b{ font-size:6px!important;line-height:6px!important;letter-spacing:.15px!important; color:rgba(235,239,255,.78)!important;text-shadow:0 1px 3px #000!important } /* All paid slots use our yarn artifact as the 50% locked preview */ #depot #mergeBoard .artifactCell.locked{ background:linear-gradient(145deg,rgba(25,20,62,.78),rgba(14,19,48,.72))!important; border:1px solid rgba(134,70,255,.32)!important; box-shadow:inset 0 0 13px rgba(80,42,190,.16)!important } #depot #mergeBoard .artifactCell.locked .lockedArtifact{ opacity:.50!important;filter:saturate(.9) brightness(.82)!important; width:100%!important;height:calc(100% - 9px)!important } #depot #mergeBoard .artifactCell.locked .lockedArtifact img{ width:108%!important;height:108%!important;max-width:none!important;max-height:none!important; object-fit:contain!important;filter:drop-shadow(0 2px 5px rgba(0,0,0,.35))!important } #depot #mergeBoard .artifactCell.locked b{ bottom:2px!important;font-size:5.7px!important;line-height:7px!important;color:#c9d8ff!important } #depot #mergeBoard .artifactCell:not(.locked):active{ transform:scale(.95)!important;box-shadow:0 0 15px rgba(43,178,255,.55)!important } /* v226 — clean inventory-style Depot, based on approved reference */ #depot #mergeBoard.artifactBoard{ background:rgba(13,17,32,.94)!important; border:1px solid rgba(75,88,126,.38)!important; border-radius:24px!important; box-shadow:0 12px 30px rgba(0,0,0,.28)!important; padding:8px!important;gap:4px!important } #depot #mergeBoard .artifactCell{ position:relative!important;border-radius:13px!important; background:rgba(25,30,49,.72)!important; border:1px solid rgba(76,86,119,.16)!important; box-shadow:none!important } #depot #mergeBoard .artifactCell.empty{ background:rgba(18,22,37,.58)!important;border-color:rgba(64,72,98,.10)!important } #depot #mergeBoard .artifactCell:not(.empty):not(.locked){ background:linear-gradient(145deg,rgba(30,37,60,.92),rgba(20,25,43,.88))!important; border-color:rgba(91,110,157,.25)!important } #depot #mergeBoard .artifactCell span:not(.lockedArtifact){ height:calc(100% - 5px)!important } #depot #mergeBoard .artifactCell span:not(.lockedArtifact) img{ width:124%!important;height:124%!important;max-width:none!important;max-height:none!important; object-fit:contain!important;transform:translateY(-2px)!important; filter:drop-shadow(0 3px 5px rgba(0,0,0,.32)) saturate(1.12)!important } #depot #mergeBoard .artifactCell b{ font-size:5.8px!important;line-height:6px!important;color:rgba(224,229,242,.78)!important } #depot #mergeBoard .artifactCell.locked{ background:rgba(22,25,42,.72)!important; border-color:rgba(70,77,105,.13)!important;box-shadow:none!important } #depot #mergeBoard .artifactCell.locked .lockedArtifact{ width:100%!important;height:100%!important;opacity:.50!important; display:flex!important;align-items:center!important;justify-content:center!important; filter:grayscale(.12) saturate(.78) brightness(.72)!important } #depot #mergeBoard .artifactCell.locked .lockedArtifact img{ width:112%!important;height:112%!important;max-width:none!important;max-height:none!important; object-fit:contain!important;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))!important } #depot #mergeBoard .artifactCell.locked .slotPadlock{ position:absolute!important;right:5px!important;bottom:12px!important; width:auto!important;height:auto!important;font-size:6px!important;line-height:7px!important; color:#9aa2bd!important;opacity:.82!important;z-index:3!important } #depot #mergeBoard .artifactCell.locked b{ position:absolute!important;left:2px!important;right:2px!important;bottom:2px!important; font-size:5.5px!important;line-height:7px!important;color:#cbd1e5!important; text-shadow:0 1px 3px #000!important;z-index:3!important } #depot #mergeBoard .artifactCell:not(.locked):active{ transform:scale(.94)!important;box-shadow:0 0 12px rgba(100,132,255,.34)!important } /* v227 — confirmation slider for paid Depot slots */ .depotUnlockSheet .artifactInfoText em{display:block;margin-top:3px;font-style:normal;font-size:9px;color:#8f96ad} .depotUnlockSheet #depotUnlockPrice{color:#78a7ff!important} .depotUnlockSheet #depotUnlockBuy{ background:linear-gradient(135deg,#6552e8,#9b55e8)!important;color:#fff!important; box-shadow:0 5px 18px rgba(102,72,226,.28)!important } /* v228 — fix stale locked-slot art + purchase sheet styling */ .depotUnlockSheet .artifactInfoPanel{ grid-template-columns:74px 1fr!important; padding:16px!important;gap:14px!important; background:linear-gradient(155deg,rgba(14,18,31,.985),rgba(19,20,37,.985))!important; border:1px solid rgba(113,119,155,.32)!important; box-shadow:0 -12px 38px rgba(0,0,0,.48)!important } .depotUnlockSheet .artifactInfoIcon{ width:74px!important;height:74px!important;border-radius:18px!important; background:linear-gradient(145deg,rgba(38,44,67,.96),rgba(24,28,45,.96))!important; overflow:visible!important } .depotUnlockSheet .artifactInfoIcon img{ display:block!important;width:92%!important;height:92%!important;max-width:none!important;max-height:none!important; object-fit:contain!important;opacity:1!important;filter:drop-shadow(0 4px 7px rgba(0,0,0,.34)) saturate(1.08)!important } .depotUnlockSheet .artifactInfoText small{color:#a7adbf!important;opacity:.72!important} .depotUnlockSheet .artifactInfoText b{font-size:16px!important;color:#fff!important} .depotUnlockSheet .artifactInfoText span{font-size:11px!important;color:#b7bdce!important;opacity:.9!important} .depotUnlockSheet #depotUnlockPrice{font-size:18px!important;color:#8aa7ff!important} .depotUnlockSheet #depotUnlockBalance{font-size:9px!important;color:#8e95aa!important} .depotUnlockSheet .artifactInfoActions button{height:46px!important;color:#fff!important} .depotUnlockSheet #depotUnlockCancel{ background:rgba(255,255,255,.075)!important;color:#d9dce6!important; border:1px solid rgba(255,255,255,.06)!important } .depotUnlockSheet #depotUnlockBuy{ background:linear-gradient(135deg,#6554ee,#a448e8)!important;color:#fff!important; border:1px solid rgba(171,129,255,.35)!important } /* v229 — 2048-inspired motion/merge language for Depot */ #depot #mergeBoard .artifactCell{ transition:transform .14s cubic-bezier(.2,.8,.2,1),border-color .16s ease,background .16s ease,box-shadow .16s ease,filter .16s ease!important; will-change:transform } #depot #mergeBoard .artifactCell:not(.locked):not(.empty){z-index:1} #depot #mergeBoard .artifactCell:not(.locked):not(.empty):active{ transform:scale(1.12)!important;z-index:8!important; filter:brightness(1.12)!important } #depot #mergeBoard .artifactCell.dropTarget{ transform:scale(.94)!important; border-color:rgba(104,154,255,.62)!important; background:rgba(48,66,116,.48)!important; box-shadow:inset 0 0 18px rgba(80,127,255,.24)!important } #depot #mergeBoard .artifactCell.mergeTarget{ transform:scale(1.07)!important;z-index:4!important; border-color:rgba(255,215,94,.82)!important; box-shadow:0 0 14px rgba(255,201,70,.30),inset 0 0 16px rgba(255,211,82,.17)!important; animation:depotMergeReady .72s ease-in-out infinite alternate } @keyframes depotMergeReady{ from{filter:brightness(1)} to{filter:brightness(1.23)} } #depot #mergeBoard .artifactCell.mergeBorn{ z-index:10!important; animation:depotMergePop .48s cubic-bezier(.16,.9,.25,1.35) both!important } @keyframes depotMergePop{ 0%{transform:scale(.52);filter:brightness(1.9)} 48%{transform:scale(1.24);filter:brightness(1.35)} 72%{transform:scale(.94)} 100%{transform:scale(1);filter:brightness(1)} } #depot #mergeBoard .mergeShock{ position:absolute;left:50%;top:50%;width:42%;aspect-ratio:1;border-radius:50%; border:1.5px solid rgba(255,220,104,.85);pointer-events:none;z-index:20; transform:translate(-50%,-50%) scale(.3); animation:depotShock .62s ease-out forwards } @keyframes depotShock{ 0%{opacity:1;transform:translate(-50%,-50%) scale(.3)} 100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)} } /* Visual value rises with artifact level */ #depot #mergeBoard .artifactLv3,#depot #mergeBoard .artifactLv4{ box-shadow:inset 0 0 10px rgba(242,190,69,.08),0 0 7px rgba(242,190,69,.08)!important } #depot #mergeBoard .artifactLv5,#depot #mergeBoard .artifactLv6{ border-color:rgba(144,93,255,.36)!important; box-shadow:inset 0 0 13px rgba(117,71,255,.13),0 0 10px rgba(99,76,255,.11)!important } #depot #mergeBoard .artifactLv7{ border-color:rgba(92,199,255,.48)!important; box-shadow:inset 0 0 15px rgba(70,172,255,.16),0 0 12px rgba(61,160,255,.16)!important } #depot #mergeBoard .artifactLv8{ border-color:rgba(255,218,105,.62)!important; box-shadow:inset 0 0 17px rgba(255,198,68,.18),0 0 14px rgba(255,192,55,.22)!important; animation:artifactTopGlow 1.8s ease-in-out infinite alternate } @keyframes artifactTopGlow{ from{filter:brightness(1)} to{filter:brightness(1.16)} } @media (prefers-reduced-motion:reduce){ #depot #mergeBoard .artifactCell,#depot #mergeBoard .mergeShock{animation:none!important;transition:none!important} } /* v230 — unmistakable live 2048 feedback */ #depot #mergeBoard .artifactCell:not(.locked):not(.empty){ animation:depotTileEnter .28s cubic-bezier(.2,.85,.25,1) both } @keyframes depotTileEnter{from{transform:scale(.82);opacity:.55}to{transform:scale(1);opacity:1}} #depot #mergeBoard .artifactCell.mergeTarget{ transform:scale(1.12)!important; outline:2px solid rgba(255,211,78,.72)!important; outline-offset:-2px!important; box-shadow:0 0 22px rgba(255,191,45,.55),inset 0 0 20px rgba(255,209,73,.24)!important } #depot #mergeBoard .artifactCell.dropTarget{ outline:1px solid rgba(92,167,255,.7)!important; background:rgba(42,61,111,.6)!important } /* v235 — finger-following artifact drag */ .artifactDragGhost{ position:fixed!important;left:0!important;top:0!important;margin:0!important; z-index:99999!important;pointer-events:none!important;opacity:.98!important; transform-origin:center!important;will-change:transform!important; transition:none!important;filter:brightness(1.08) drop-shadow(0 10px 12px rgba(0,0,0,.45))!important } .artifactDragGhost span{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:100%!important} .artifactDragGhost img{width:124%!important;height:124%!important;max-width:none!important;max-height:none!important;object-fit:contain!important} .artifactDragGhost b{opacity:0!important} #depot #mergeBoard .artifactCell.dragSource{opacity:.16!important;transform:scale(.86)!important;transition:opacity .14s ease,transform .14s ease!important} #depot #mergeBoard .artifactCell.dropTarget{outline:none!important;background:rgba(18,22,37,.58)!important;box-shadow:none!important;transform:none!important} #depot #mergeBoard .artifactCell.mergeTarget{ transform:scale(1.06)!important;outline:1px solid rgba(255,211,78,.58)!important; box-shadow:0 0 15px rgba(255,194,47,.35),inset 0 0 12px rgba(255,209,73,.15)!important } #depot #mergeBoard .artifactCell.mergeBorn{animation:depotMergePopSmooth .56s cubic-bezier(.18,.9,.24,1.3) both!important} @keyframes depotMergePopSmooth{ 0%{transform:scale(.72);opacity:.65;filter:brightness(1.65)} 48%{transform:scale(1.17);opacity:1;filter:brightness(1.25)} 72%{transform:scale(.97)} 100%{transform:scale(1);filter:brightness(1)} } /* v236 — unique Dynasty Combo system */ .dynastyCombo{ position:fixed;left:50%;top:36%;z-index:8200;pointer-events:none; min-width:160px;padding:9px 18px;text-align:center;border-radius:18px; background:linear-gradient(145deg,rgba(17,20,38,.94),rgba(35,20,67,.94)); border:1px solid rgba(145,102,255,.5);box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 22px rgba(110,67,255,.22); opacity:0;transform:translate(-50%,-50%) scale(.68);transition:opacity .18s ease,transform .24s cubic-bezier(.2,.9,.25,1.25) } .dynastyCombo.show{opacity:1;transform:translate(-50%,-50%) scale(1)} .dynastyCombo small{display:block;font-size:7px;letter-spacing:2px;color:#aaa7c7} .dynastyCombo strong{display:block;margin:2px 0;font-size:21px;letter-spacing:1px;color:#fff;text-shadow:0 0 12px rgba(135,98,255,.75)} .dynastyCombo span{display:block;font-size:8px;letter-spacing:1px;color:#bca8ff} .dynastyCombo.max{border-color:rgba(255,211,91,.8);box-shadow:0 0 34px rgba(255,190,51,.4)} .dynastyCombo.max strong{color:#ffe27c;text-shadow:0 0 18px rgba(255,190,51,.9);animation:dynastyWord .55s ease-in-out infinite alternate} @keyframes dynastyWord{to{transform:scale(1.07);filter:brightness(1.18)}} #depot #mergeBoard .artifactCell.comboPulse{animation:comboCellPulse .68s ease-out!important} @keyframes comboCellPulse{0%{box-shadow:0 0 0 rgba(151,98,255,0)}45%{box-shadow:0 0 26px rgba(151,98,255,.7)}100%{box-shadow:0 0 0 rgba(151,98,255,0)}} /* v237 — Dynasty Charge: combo becomes a persistent Depot mechanic */ .dynastyCharge{ width:calc(100% - 18px);max-width:760px;margin:0 auto 7px;padding:7px 10px; display:grid;grid-template-columns:auto 1fr 30px;align-items:center;gap:8px; border:1px solid rgba(118,91,206,.24);border-radius:13px; background:rgba(13,17,31,.78);box-shadow:inset 0 0 12px rgba(96,63,186,.06) } .dynastyCharge span{font-size:7px;letter-spacing:1.1px;color:#a8a4bb;white-space:nowrap} .dynastyCharge>div{height:5px;border-radius:5px;overflow:hidden;background:rgba(255,255,255,.07)} .dynastyCharge i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6754ee,#b24de4,#f0c85e);box-shadow:0 0 9px rgba(151,85,238,.55);transition:width .32s cubic-bezier(.2,.8,.2,1)} .dynastyCharge b{font-size:8px;color:#a9a8bd;text-align:right} .dynastyCharge.ready{border-color:rgba(241,201,84,.55);box-shadow:0 0 16px rgba(237,188,60,.15)} .dynastyCharge.ready b{color:#f3d46d} .dynastyCombo{top:42%!important;min-width:145px!important;padding:7px 15px!important} .dynastyCombo strong{font-size:18px!important} .dynastyCombo span{font-size:7px!important} /* v238 — ordered Dynasty chains only; unobtrusive chain notice */ .dynastyCombo{ position:fixed!important;left:auto!important;right:12px!important;top:118px!important; min-width:118px!important;max-width:150px!important;padding:6px 10px!important; transform:translateY(-8px) scale(.92)!important;border-radius:12px!important } .dynastyCombo.show{transform:translateY(0) scale(1)!important} .dynastyCombo small{font-size:5.5px!important;letter-spacing:1.2px!important} .dynastyCombo strong{font-size:12px!important;line-height:15px!important} .dynastyCombo span{font-size:6px!important;line-height:9px!important} /* v239 — dedicated colorful Depot background + richer merge celebration */ #depot{ position:relative!important; background: linear-gradient(90deg,rgba(3,7,15,.48) 0%,rgba(3,7,15,.08) 22%,rgba(3,7,15,.03) 50%,rgba(3,7,15,.08) 78%,rgba(3,7,15,.48) 100%), linear-gradient(180deg,rgba(3,7,15,.12),rgba(3,7,15,.32)), url('assets/941ADD4D-814C-42A8-8F3D-379D6908F53F.png?v=239') center top/cover fixed!important; background-attachment:scroll!important } #depot:before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:radial-gradient(ellipse at 50% 38%,transparent 28%,rgba(2,5,12,.08) 62%,rgba(2,5,12,.42) 100%) } #depot>*{position:relative;z-index:1} #depot #mergeBoard.artifactBoard{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)} #depot #mergeBoard .artifactCell.mergeCelebration{ z-index:30!important; box-shadow:0 0 10px rgba(255,232,96,.9),0 0 22px rgba(255,116,61,.75),0 0 38px rgba(126,72,255,.7)!important } #depot #mergeBoard .artifactCell.mergeCelebration:after{ content:"";position:absolute;inset:-16%;border-radius:50%;pointer-events:none; background:conic-gradient(from 0deg,transparent,#ffd85c,transparent,#ff5d92,transparent,#6c8cff,transparent,#6affd8,transparent); opacity:.75;filter:blur(5px);animation:mergeAuraSpin .72s ease-out forwards;z-index:-1 } .mergeSpark{ position:absolute!important;left:50%!important;top:50%!important;width:5px!important;height:5px!important; border-radius:50%!important;background:#fff7a8!important;box-shadow:0 0 7px #ffd84d!important; pointer-events:none!important;z-index:50!important; animation:mergeSparkFly .72s cubic-bezier(.15,.7,.2,1) forwards!important } .mergeSpark:nth-of-type(3n){background:#ff73bd!important;box-shadow:0 0 7px #ff4da6!important} .mergeSpark:nth-of-type(3n+1){background:#74d9ff!important;box-shadow:0 0 7px #559cff!important} @keyframes mergeSparkFly{ 0%{opacity:1;transform:translate(-50%,-50%) rotate(var(--a)) translateX(4px) scale(1.25)} 100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) scale(.25)} } @keyframes mergeAuraSpin{ 0%{opacity:.9;transform:scale(.55) rotate(0)} 70%{opacity:.65;transform:scale(1.25) rotate(160deg)} 100%{opacity:0;transform:scale(1.45) rotate(220deg)} } /* v240 — single clean merge animation; legacy post-pulse disabled */ #depot #mergeBoard .artifactCell.mergeBorn, #depot #mergeBoard .artifactCell.comboPulse, #depot #mergeBoard .artifactCell.mergeCelebration{ animation:none!important } #depot #mergeBoard .artifactCell.mergeBorn:after, #depot #mergeBoard .artifactCell.mergeCelebration:after, #depot #mergeBoard .mergeShock{display:none!important} #depot #mergeBoard .artifactCell.mergeClean{ z-index:40!important; animation:mergeCleanPop .56s cubic-bezier(.16,.9,.22,1.22) both!important } #depot #mergeBoard .artifactCell.mergeClean:before{ content:"";position:absolute;inset:-10%;border-radius:50%;pointer-events:none;z-index:-1; background:radial-gradient(circle,rgba(255,244,160,.78) 0%,rgba(255,179,72,.34) 30%,rgba(255,91,183,.18) 52%,transparent 72%); animation:mergeCleanGlow .55s ease-out both } .mergeCleanBurst{ position:absolute!important;left:50%!important;top:50%!important;width:34%!important;aspect-ratio:1!important; border:2px solid rgba(255,224,111,.9)!important;border-radius:50%!important;pointer-events:none!important;z-index:45!important; animation:mergeCleanRing .52s ease-out forwards!important } .mergeCleanSpark{ position:absolute!important;left:50%!important;top:50%!important;width:4px!important;height:4px!important;border-radius:50%!important; background:#fff1a1!important;box-shadow:0 0 7px rgba(255,202,68,.9)!important;pointer-events:none!important;z-index:50!important; animation:mergeCleanSparkFly .52s cubic-bezier(.18,.72,.2,1) forwards!important } .mergeCleanSpark:nth-of-type(3n){background:#ff80c8!important;box-shadow:0 0 7px rgba(255,80,177,.85)!important} .mergeCleanSpark:nth-of-type(3n+1){background:#7ce6ff!important;box-shadow:0 0 7px rgba(84,171,255,.9)!important} @keyframes mergeCleanPop{ 0%{transform:scale(.70);filter:brightness(1.65)} 48%{transform:scale(1.16);filter:brightness(1.22)} 72%{transform:scale(.98)} 100%{transform:scale(1);filter:brightness(1)} } @keyframes mergeCleanGlow{ 0%{opacity:0;transform:scale(.45)} 30%{opacity:1} 100%{opacity:0;transform:scale(1.35)} } @keyframes mergeCleanRing{ 0%{opacity:1;transform:translate(-50%,-50%) scale(.35)} 100%{opacity:0;transform:translate(-50%,-50%) scale(2.25)} } @keyframes mergeCleanSparkFly{ 0%{opacity:1;transform:translate(-50%,-50%) rotate(var(--a)) translateX(3px) scale(1.2)} 100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) scale(.25)} } /* v242 — lower and center card controls group */ #life .cardProgress, #life #tap, #life .dynastyPass{ position:relative!important; left:50%!important; transform:translateX(-50%)!important; width:calc(100% - 34px)!important; max-width:720px!important; box-sizing:border-box!important } #life .cardProgress{ margin-top:24px!important; margin-bottom:14px!important; padding:15px 22px 17px!important } #life #tap{ margin:0 auto 14px!important; min-height:76px!important } #life .dynastyPass{ margin:0 auto 26px!important } /* v243 — balanced Life controls: clear card gap + Pass above bottom nav */ #life{ padding-bottom:178px!important; } #life .cardProgress{ margin-top:14px!important; margin-bottom:12px!important; } #life #tap{ margin-bottom:12px!important; } #life .dynastyPass{ margin-bottom:18px!important; } @media (max-height:780px){ #life{padding-bottom:168px!important} #life .cardProgress{margin-top:10px!important} #life #tap{min-height:68px!important} } /* v245 — stable aligned Life controls */ #life .cardProgress, #life #tap, #life .dynastyPass{ position:relative!important; left:auto!important;right:auto!important; transform:none!important; width:auto!important; max-width:none!important; margin-left:32px!important; margin-right:32px!important; box-sizing:border-box!important } #life .cardProgress{ margin-top:18px!important; margin-bottom:12px!important; padding:15px 22px 17px!important } #life #tap{ margin-top:0!important; margin-bottom:12px!important; min-height:72px!important } #life .dynastyPass{ margin-top:0!important; margin-bottom:22px!important } #life{padding-bottom:178px!important} /* v246 — level panel above card; unified centered action stack */ #life .cardProgress{ position:relative!important; left:auto!important;right:auto!important;transform:none!important; width:calc(100% - 64px)!important;max-width:none!important; margin:16px 32px 14px!important; padding:15px 22px 17px!important; box-sizing:border-box!important; z-index:8!important } #life #tap, #life .dynastyPass{ position:relative!important; left:auto!important;right:auto!important;transform:none!important; width:calc(100% - 64px)!important;max-width:none!important; margin-left:32px!important;margin-right:32px!important; box-sizing:border-box!important } #life #tap{margin-top:16px!important;margin-bottom:12px!important;min-height:72px!important} #life .dynastyPass{margin-top:0!important;margin-bottom:22px!important} #life .scene{margin-top:0!important} /* v247 — progress panel at top of Life, above the entire card stage */ #life>.cardProgress{ position:relative!important;z-index:30!important; width:calc(100% - 64px)!important;max-width:none!important; margin:14px 32px 16px!important;padding:14px 22px 16px!important; left:auto!important;right:auto!important;transform:none!important; box-sizing:border-box!important } #life>.stage{margin-top:0!important} /* v248 — Life layout matched to approved sketch */ #life{ padding-top:0!important; padding-bottom:190px!important; } #life>.cardProgress{ display:block!important; position:relative!important; z-index:30!important; width:calc(100% - 64px)!important; max-width:none!important; margin:18px 32px 14px!important; padding:17px 24px 18px!important; left:auto!important;right:auto!important;top:auto!important;bottom:auto!important; transform:none!important; box-sizing:border-box!important; border-radius:22px!important; } #life>.cardProgress>div:first-child{ display:flex!important;align-items:center!important;justify-content:space-between!important; margin-bottom:10px!important; } #life>.cardProgress b{font-size:13px!important} #life>.cardProgress span{font-size:11px!important} #life>.cardProgress .cardBar{height:8px!important;margin:0!important} #life>.cardProgress #cardInfo{display:none!important} #life>.stage{ width:100%!important; margin:0!important;padding:0!important; } #life>.stage .scene{ width:calc(100% - 64px)!important; margin:0 32px!important; padding:0!important; } #life>.stage #person{ width:100%!important; margin:0 auto!important; } #life>.stage .energyRegen{display:none!important} #life #tap{ display:block!important; position:relative!important; width:calc(100% - 64px)!important; max-width:none!important; min-height:82px!important; margin:16px 32px 14px!important; left:auto!important;right:auto!important;transform:none!important; border-radius:24px!important; box-sizing:border-box!important; } #life>.dynastyPass{ display:flex!important; position:relative!important; width:calc(100% - 64px)!important; max-width:none!important; min-height:76px!important; margin:0 32px 24px!important; left:auto!important;right:auto!important;transform:none!important; box-sizing:border-box!important; } @media(max-width:430px){ #life>.cardProgress, #life>.stage .scene, #life #tap, #life>.dynastyPass{width:calc(100% - 48px)!important;margin-left:24px!important;margin-right:24px!important} } /* v249 — approved sketch, definitive Life layout */ #life.page.active{display:flex!important;flex-direction:column!important;align-items:stretch!important;padding:0 0 190px!important} #life>.cardProgress{order:1!important;position:relative!important;inset:auto!important;transform:none!important;float:none!important;width:auto!important;max-width:none!important;margin:18px 32px 16px!important;padding:16px 22px 17px!important;box-sizing:border-box!important;z-index:20!important} #life>.stage{order:2!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;position:relative!important;width:100%!important;margin:0!important;padding:0!important} #life>.stage>.scene{order:1!important;position:relative!important;width:auto!important;max-width:none!important;margin:0 32px!important;padding:0!important} #life>.stage>.scene>#person{position:relative!important;width:100%!important;max-width:none!important;margin:0!important} #life>.stage>.energyRegen{display:none!important} #life>.stage>#tap{order:2!important;position:relative!important;inset:auto!important;transform:none!important;float:none!important;width:auto!important;max-width:none!important;margin:16px 32px 14px!important;min-height:82px!important;box-sizing:border-box!important} #life>.dynastyPass{order:3!important;position:relative!important;inset:auto!important;transform:none!important;float:none!important;width:auto!important;max-width:none!important;margin:0 32px 24px!important;box-sizing:border-box!important} #life>.cardProgress #cardInfo{display:none!important} @media(max-width:430px){ #life>.cardProgress,#life>.stage>.scene,#life>.stage>#tap,#life>.dynastyPass{margin-left:24px!important;margin-right:24px!important} } /* v250 — pending artifact inventory / next craft queue */ #depot .artifactQueue{ width:calc(100% - 56px);max-width:760px;margin:8px auto 8px;padding:10px 10px 11px; box-sizing:border-box;border:1px solid rgba(80,113,210,.28);border-radius:18px; background:linear-gradient(145deg,rgba(9,15,34,.94),rgba(19,17,49,.94)); box-shadow:0 10px 28px rgba(0,0,0,.24),inset 0 0 18px rgba(62,76,177,.09) } .artifactQueueTitle{display:flex;align-items:center;justify-content:space-between;padding:0 4px 7px} .artifactQueueTitle b{font-size:9px;letter-spacing:1.7px;color:#dce4ff} .artifactQueueTitle span{font-size:8px;letter-spacing:1px;color:#7f89a8} .artifactQueueTrack{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px} .artifactQueueItem{position:relative;aspect-ratio:1;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(18,25,57,.82);border:1px solid rgba(76,104,190,.24)} .artifactQueueItem.next{border-color:rgba(255,191,55,.68);box-shadow:0 0 13px rgba(255,177,43,.2)} .artifactQueueItem span{width:92%;height:92%;display:flex;align-items:center;justify-content:center} .artifactQueueItem span img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))} .artifactQueueItem b{position:absolute;bottom:2px;font-size:6px;color:#e9edff;text-shadow:0 1px 3px #000} .artifactQueueEmpty{grid-column:1/-1;padding:13px 6px;text-align:center;font-size:9px;letter-spacing:.5px;color:#747d99} #depot .mergeNote{margin-top:6px!important} /* v252 — recent artifacts: larger, animated, newest first */ #depot .artifactQueue{padding:10px 12px 12px!important} #depot .artifactQueueTrack{gap:5px!important} #depot .artifactQueueItem.recent{ aspect-ratio:1!important; border:none!important; background:transparent!important; overflow:visible!important; transform:translateZ(0); } #depot .artifactQueueItem.recent span{ width:118%!important;height:118%!important; overflow:visible!important; } #depot .artifactQueueItem.recent span img{ width:100%!important;height:100%!important;max-width:none!important;max-height:none!important; object-fit:contain!important; filter:drop-shadow(0 4px 7px rgba(0,0,0,.45))!important; } #depot .artifactQueueItem.recent b{bottom:-1px!important;font-size:6.5px!important} #depot .artifactQueueItem.recent.newest{ animation:recentArtifactIn .62s cubic-bezier(.18,.88,.24,1.2) both!important; } #depot .artifactQueueItem.recent.newest span img{ animation:recentArtifactGlow .75s ease-out both!important; } @keyframes recentArtifactIn{ 0%{opacity:0;transform:translateX(-22px) scale(.55) rotate(-10deg)} 65%{opacity:1;transform:translateX(3px) scale(1.12) rotate(2deg)} 100%{opacity:1;transform:translateX(0) scale(1) rotate(0)} } @keyframes recentArtifactGlow{ 0%{filter:drop-shadow(0 0 16px rgba(255,202,67,.95)) brightness(1.45)} 100%{filter:drop-shadow(0 4px 7px rgba(0,0,0,.45)) brightness(1)} } /* v253 — compact recent artifacts: count only, stable one-shot animation */ #depot .artifactQueue{ display:flex!important;align-items:center!important;gap:10px!important; padding:8px 12px!important;min-height:58px!important; } #depot .artifactQueueTitle{display:none!important} #depot .artifactQueueCount{ flex:0 0 auto;min-width:28px;text-align:center; font-size:15px;font-weight:900;line-height:1;color:#e9edff; } #depot .artifactQueueTrack{ flex:1!important;display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important; gap:4px!important;align-items:center!important; } #depot .artifactQueueItem.recent{ opacity:1!important;transform:none!important;animation:none!important; } #depot .artifactQueueItem.recent span{width:112%!important;height:112%!important} #depot .artifactQueueItem.recent b{display:none!important} #depot .artifactQueueItem.recent.newest{ animation:recentArtifactOnce .48s cubic-bezier(.2,.8,.25,1) both!important; } #depot .artifactQueueItem.recent.newest span img{animation:none!important} @keyframes recentArtifactOnce{ 0%{opacity:0;transform:translateX(-10px) scale(.78)} 70%{opacity:1;transform:translateX(1px) scale(1.06)} 100%{opacity:1;transform:translateX(0) scale(1)} } /* v254 — hard reset recent strip: no labels, no motion */ #depot #artifactQueue .artifactQueueTitle, #depot #artifactQueue .artifactQueueEmpty, #depot #artifactQueue .artifactQueueItem b, #depot #artifactQueue .artifactQueueItem i{display:none!important} #depot #artifactQueue{ display:flex!important;align-items:center!important;justify-content:center!important; gap:8px!important;padding:7px 12px!important;min-height:54px!important; } #depot #artifactQueue .artifactQueueCount{ display:flex!important;align-items:center!important;justify-content:center!important; flex:0 0 30px!important;width:30px!important;height:30px!important; font-size:14px!important;font-weight:900!important;color:#f1f4ff!important; } #depot #artifactQueue .artifactQueueTrack{ flex:0 1 auto!important;width:calc(100% - 42px)!important; display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important; gap:3px!important;align-items:center!important; } #depot #artifactQueue .artifactQueueItem, #depot #artifactQueue .artifactQueueItem.recent, #depot #artifactQueue .artifactQueueItem.newest{ position:relative!important;aspect-ratio:1!important; border:0!important;background:transparent!important;box-shadow:none!important; opacity:1!important;transform:none!important;transition:none!important; animation:none!important; } #depot #artifactQueue .artifactQueueItem span{ display:flex!important;align-items:center!important;justify-content:center!important; width:100%!important;height:100%!important;transform:none!important; animation:none!important;transition:none!important; } #depot #artifactQueue .artifactQueueItem span img{ display:block!important;width:122%!important;height:122%!important; max-width:none!important;max-height:none!important;object-fit:contain!important; transform:none!important;animation:none!important;transition:none!important; filter:drop-shadow(0 3px 5px rgba(0,0,0,.42))!important; } /* v255 — FIFO artifact conveyor */ #depot #artifactQueue .artifactQueueItem{ transition:transform .34s cubic-bezier(.22,.8,.25,1),opacity .28s ease!important; } #depot #artifactQueue .artifactQueueItem.next{ border:1px solid rgba(255,193,66,.72)!important; border-radius:12px!important; background:rgba(54,38,18,.34)!important; box-shadow:0 0 12px rgba(255,180,45,.20)!important; } #depot #artifactQueue .artifactQueueItem.leaving{ opacity:0!important; transform:translateY(-34px) scale(.72)!important; } #depot #artifactQueue .artifactQueueItem.leaving span img{ filter:drop-shadow(0 0 13px rgba(255,193,66,.85)) brightness(1.25)!important; } #depot #mergeBoard .artifactCell.queue-arrive{ animation:queueCellArrive .58s cubic-bezier(.18,.86,.24,1.18)!important; z-index:7!important; } @keyframes queueCellArrive{ 0%{opacity:.15;transform:scale(.42);filter:brightness(1.8) drop-shadow(0 0 18px rgba(255,197,65,.95))} 68%{opacity:1;transform:scale(1.13);filter:brightness(1.25) drop-shadow(0 0 12px rgba(255,197,65,.62))} 100%{opacity:1;transform:scale(1);filter:none} } /* v256 — physical queue-to-slot flight */ .artifactFlyGhost{ position:fixed!important;z-index:99999!important;pointer-events:none!important; display:flex!important;align-items:center!important;justify-content:center!important; transform:translate3d(0,0,0) scale(1)!important; transform-origin:center!important;opacity:1!important; transition:transform .50s cubic-bezier(.22,.72,.18,1),opacity .42s ease!important; filter:drop-shadow(0 0 10px rgba(255,195,67,.55))!important; will-change:transform,opacity!important; } .artifactFlyGhost img{ width:100%!important;height:100%!important;object-fit:contain!important; max-width:none!important;max-height:none!important; } .artifactFlyGhost.land{ opacity:.18!important; filter:drop-shadow(0 0 18px rgba(255,210,93,.95)) brightness(1.45)!important; } #depot #artifactQueue .artifactQueueItem.leaving{ opacity:.18!important;transform:scale(.82)!important; } #depot #mergeBoard .artifactCell.queue-arrive{ animation:queueSlotLand .42s cubic-bezier(.18,.85,.28,1.15)!important; } @keyframes queueSlotLand{ 0%{transform:scale(.72);filter:brightness(1.55) drop-shadow(0 0 16px rgba(255,202,72,.85))} 72%{transform:scale(1.10);filter:brightness(1.18) drop-shadow(0 0 8px rgba(255,202,72,.45))} 100%{transform:scale(1);filter:none} } /* v257 — cinematic slot-to-slot flight with luminous tail */ .artifactFlyGhost{transition:opacity .16s ease,filter .16s ease!important} .artifactFlightTrail{ position:fixed!important;width:18px!important;height:18px!important;border-radius:50%!important; z-index:99996!important;pointer-events:none!important;transform:translate(-50%,-50%)!important; background:radial-gradient(circle,rgba(255,238,151,.9) 0 16%,rgba(255,176,48,.46) 38%,rgba(125,72,255,.20) 62%,transparent 74%)!important; box-shadow:0 0 10px rgba(255,196,73,.72),0 0 24px rgba(137,74,255,.42)!important; filter:blur(.4px)!important; } .artifactFlightSpark{ position:fixed!important;width:5px!important;height:5px!important;border-radius:50%!important; z-index:99995!important;pointer-events:none!important;transform:translate(-50%,-50%)!important; background:#ffe79a!important;box-shadow:0 0 7px rgba(255,185,55,.95),0 0 13px rgba(132,80,255,.62)!important; } #depot #mergeBoard .artifactCell.queue-target-flash{ animation:queueTargetFlash .34s ease-out!important; } @keyframes queueTargetFlash{ 0%{box-shadow:inset 0 0 0 1px rgba(255,224,122,.8),0 0 5px rgba(255,196,64,.4)!important} 45%{box-shadow:inset 0 0 18px rgba(255,214,100,.55),0 0 24px rgba(255,184,52,.9),0 0 38px rgba(121,72,255,.52)!important} 100%{box-shadow:inherit} } /* v258 — real artifact flies; no particle-dot placeholder */ .artifactFlightSpark,.artifactFlightTrail{display:none!important} .artifactFlyGhost{ display:flex!important;visibility:visible!important;opacity:1!important; overflow:visible!important;isolation:isolate!important; filter:drop-shadow(0 4px 5px rgba(0,0,0,.38)) drop-shadow(0 0 10px rgba(255,191,67,.48))!important; } .artifactFlyGhost img{ display:block!important;width:100%!important;height:100%!important; max-width:none!important;max-height:none!important;object-fit:contain!important; opacity:1!important;visibility:visible!important; filter:none!important; } .artifactFlightTail{ position:fixed!important;height:13px!important;z-index:99994!important;pointer-events:none!important; transform-origin:100% 50%!important;border-radius:999px!important; background:linear-gradient(90deg,transparent 0%,rgba(116,72,255,.12) 28%,rgba(255,170,50,.30) 62%,rgba(255,231,150,.72) 100%)!important; box-shadow:0 0 8px rgba(255,181,55,.34),0 0 14px rgba(121,73,255,.22)!important; filter:blur(2px)!important; } .artifactFlyGhost.land{opacity:1!important;filter:drop-shadow(0 0 16px rgba(255,211,103,.95)) brightness(1.18)!important} /* v259 — visible cinematic artifact flight, iOS-safe canvas trail */ .artifactFlyGhostV259{position:fixed!important;z-index:2147483646!important;pointer-events:none!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important;will-change:transform!important} .artifactFlyGhostV259 img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;opacity:1!important;filter:drop-shadow(0 5px 5px rgba(0,0,0,.5)) drop-shadow(0 0 13px rgba(255,184,47,.9))!important} .artifactFlyGhostV259.impact{transform:scale(1.22)!important;opacity:.35!important;transition:transform .18s ease-out,opacity .18s ease-out!important} .artifactTrailCanvasV259{position:fixed!important;inset:0!important;z-index:2147483645!important;pointer-events:none!important} #depot #mergeBoard .artifactCell.queue-impact-v259{animation:queueImpact259 .38s ease-out!important} @keyframes queueImpact259{0%{transform:scale(.86);filter:brightness(2)}55%{transform:scale(1.13);filter:brightness(1.35) drop-shadow(0 0 14px #ffbe3d)}100%{transform:scale(1);filter:none}} /* v260 — seamless flight-to-real-artifact handoff */ .artifactFlyGhostV259.settling{ transition:opacity .30s ease,transform .30s cubic-bezier(.2,.8,.2,1),filter .30s ease!important; } .artifactFlyGhostV259.handoff{ opacity:0!important; filter:drop-shadow(0 0 18px rgba(255,211,103,.92)) brightness(1.22)!important; } #depot #mergeBoard .artifactCell.queue-real-enter{ animation:none!important; } #depot #mergeBoard .artifactCell.queue-real-enter img, #depot #mergeBoard .artifactCell img.queue-real-img-enter{ animation:queueRealArtifact260 .34s cubic-bezier(.18,.82,.28,1.08) both!important; } @keyframes queueRealArtifact260{ 0%{opacity:.08;transform:scale(.76);filter:brightness(1.65) drop-shadow(0 0 15px rgba(255,203,83,.92))} 48%{opacity:.72;transform:scale(.94);filter:brightness(1.28) drop-shadow(0 0 10px rgba(255,191,60,.55))} 100%{opacity:1;transform:scale(1);filter:none} } #depot #mergeBoard .artifactCell.queue-impact-v260{ box-shadow:inset 0 0 14px rgba(255,210,99,.18),0 0 10px rgba(255,184,52,.22)!important; transition:box-shadow .35s ease!important; } /* v261 — softer flight + seamless slow landing */ .artifactFlyGhostV259.settling{ transition:opacity .50s cubic-bezier(.22,.7,.2,1),transform .50s cubic-bezier(.16,.84,.22,1),filter .50s ease!important; } .artifactFlyGhostV259.handoff{ opacity:0!important; transform:scale(.88)!important; filter:drop-shadow(0 0 20px rgba(255,211,103,.88)) brightness(1.12)!important; } #depot #mergeBoard .artifactCell.queue-real-enter img, #depot #mergeBoard .artifactCell img.queue-real-img-enter{ animation:queueRealArtifact261 .52s cubic-bezier(.16,.82,.24,1) both!important; } @keyframes queueRealArtifact261{ 0%{opacity:0;transform:scale(.72);filter:brightness(1.5) drop-shadow(0 0 16px rgba(255,203,83,.78))} 32%{opacity:.38;transform:scale(.84);filter:brightness(1.32) drop-shadow(0 0 13px rgba(255,196,69,.62))} 68%{opacity:.82;transform:scale(.96);filter:brightness(1.12) drop-shadow(0 0 7px rgba(255,190,58,.32))} 100%{opacity:1;transform:scale(1);filter:none} } /* v262 — clean landing: no spark remains under the artifact */ #depot #mergeBoard .artifactCell.queue-impact-v259, #depot #mergeBoard .artifactCell.queue-impact-v260, #depot #mergeBoard .artifactCell.queue-arrive, #depot #mergeBoard .artifactCell.arrive, #depot #mergeBoard .artifactCell::before, #depot #mergeBoard .artifactCell::after{ animation:none!important; } #depot #mergeBoard .artifactCell.queue-real-enter{ box-shadow:inherit!important; } #depot #mergeBoard .artifactCell.queue-real-enter::before, #depot #mergeBoard .artifactCell.queue-real-enter::after{ content:none!important; display:none!important; } #depot #mergeBoard .artifactCell.queue-real-enter img, #depot #mergeBoard .artifactCell img.queue-real-img-enter{ animation:queueRealArtifact262 .48s cubic-bezier(.16,.82,.24,1) both!important; } @keyframes queueRealArtifact262{ 0%{opacity:.12;transform:scale(.78);filter:brightness(1.16) drop-shadow(0 0 7px rgba(255,203,83,.30))} 55%{opacity:.78;transform:scale(.95);filter:brightness(1.06) drop-shadow(0 0 3px rgba(255,196,69,.14))} 100%{opacity:1;transform:scale(1);filter:none} } /* v263 — quicker flight handoff / quicker slot appearance */ .artifactFlyGhostV259.settling{ transition:opacity .23s cubic-bezier(.2,.75,.2,1),transform .23s cubic-bezier(.18,.82,.22,1),filter .23s ease!important; } .artifactFlyGhostV259.handoff{ opacity:0!important; transform:scale(.94)!important; } #depot #mergeBoard .artifactCell.queue-real-enter img, #depot #mergeBoard .artifactCell img.queue-real-img-enter{ animation:queueRealArtifact263 .24s cubic-bezier(.18,.82,.24,1) both!important; } @keyframes queueRealArtifact263{ 0%{opacity:.28;transform:scale(.86);filter:brightness(1.08)} 55%{opacity:.88;transform:scale(.98);filter:brightness(1.03)} 100%{opacity:1;transform:scale(1);filter:none} } /* v264 — artifact covers the residual landing spark */ #depot #mergeBoard .artifactCell.queue-real-enter{ position:relative!important; z-index:40!important; isolation:isolate!important; overflow:visible!important; } #depot #mergeBoard .artifactCell.queue-real-enter img, #depot #mergeBoard .artifactCell img.queue-real-img-enter{ position:relative!important; z-index:999!important; opacity:1!important; animation:queueRealArtifact264 .20s cubic-bezier(.18,.82,.28,1) both!important; filter:drop-shadow(0 3px 5px rgba(0,0,0,.38))!important; } @keyframes queueRealArtifact264{ 0%{opacity:.72;transform:scale(.90)} 55%{opacity:.96;transform:scale(.98)} 100%{opacity:1;transform:scale(1)} } /* particles may remain for a moment, but always behind the actual artifact */ #depot #mergeBoard .artifactCell.queue-real-enter canvas, #depot #mergeBoard .artifactCell.queue-real-enter .spark, #depot #mergeBoard .artifactCell.queue-real-enter .particle{ z-index:1!important; pointer-events:none!important; } /* v265 — iOS-safe artifact collision merge layer */ .mergeCollisionLayerV265{position:fixed!important;inset:0!important;z-index:2147483644!important;pointer-events:none!important} .mergeCollisionArtifactV265{position:fixed!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:2147483646!important;will-change:transform,opacity!important;transition:opacity .20s ease!important} .mergeCollisionArtifactV265 img{width:112%!important;height:112%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;filter:drop-shadow(0 4px 5px rgba(0,0,0,.48)) drop-shadow(0 0 10px rgba(255,182,50,.42))!important} .mergeCollisionCanvasV265{position:fixed!important;inset:0!important;z-index:2147483645!important;pointer-events:none!important} #depot #mergeBoard .artifactCell.mergeCollisionBornV265{z-index:45!important;animation:mergeCollisionBorn265 .28s cubic-bezier(.18,.86,.24,1.12) both!important} @keyframes mergeCollisionBorn265{0%{opacity:.4;transform:scale(.72);filter:brightness(1.5) drop-shadow(0 0 14px rgba(255,195,61,.75))}65%{opacity:1;transform:scale(1.08);filter:brightness(1.12)}100%{opacity:1;transform:scale(1);filter:none}} /* v266 — strong DOM impact flash/particles for iPhone Safari */ .mergeImpactV266{position:fixed!important;width:0!important;height:0!important;z-index:2147483647!important;pointer-events:none!important;transform:translateZ(0)} .mergeImpactCoreV266,.mergeImpactRingV266,.mergeImpactParticleV266{position:absolute!important;display:block!important;pointer-events:none!important} .mergeImpactCoreV266{left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;opacity:0;background:#fff7c9;box-shadow:0 0 10px #fff,0 0 24px #ffc33d,0 0 42px #8a48ff;transform:scale(.2)} .mergeImpactRingV266{left:-9px;top:-9px;width:18px;height:18px;border:3px solid rgba(255,218,99,.95);border-radius:50%;opacity:0;box-shadow:0 0 14px rgba(255,179,45,.95),inset 0 0 9px rgba(255,255,255,.9)} .mergeImpactParticleV266{left:calc(var(--sz) / -2);top:calc(var(--sz) / -2);width:var(--sz);height:var(--sz);border-radius:50%;opacity:0;background:#ffd866;box-shadow:0 0 5px #fff1a5,0 0 10px #ff9d31;transform:translate(0,0) scale(1)} .mergeImpactV266.go .mergeImpactCoreV266{animation:mergeCore266 .34s ease-out both} .mergeImpactV266.go .mergeImpactRingV266{animation:mergeRing266 .42s cubic-bezier(.1,.72,.18,1) both} .mergeImpactV266.go .mergeImpactParticleV266{animation:mergeParticle266 .48s cubic-bezier(.12,.7,.2,1) var(--delay) both} @keyframes mergeCore266{0%{opacity:0;transform:scale(.15)}18%{opacity:1;transform:scale(1.75)}55%{opacity:.82;transform:scale(1.15)}100%{opacity:0;transform:scale(.45)}} @keyframes mergeRing266{0%{opacity:0;transform:scale(.25)}18%{opacity:1}100%{opacity:0;transform:scale(4.8)}} @keyframes mergeParticle266{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:1}72%{opacity:.95}100%{opacity:0;transform:translate(var(--px),var(--py)) scale(.15)}} /* v267 — stronger, more readable merge sparks */ .mergeImpactV266 .mergeImpactCoreV266{ box-shadow:0 0 14px #fff,0 0 34px #ffd34e,0 0 62px #ff9b2f,0 0 78px rgba(139,68,255,.85)!important; } .mergeImpactV266 .mergeImpactRingV266{ border-width:4px!important; box-shadow:0 0 18px rgba(255,225,112,1),0 0 34px rgba(255,151,40,.9),inset 0 0 12px rgba(255,255,255,1)!important; } .mergeImpactV266 .mergeImpactParticleV266{ background:#ffe66f!important; box-shadow:0 0 7px #fff7be,0 0 14px #ffbf3e,0 0 22px rgba(255,119,30,.88)!important; } .mergeImpactV266.go .mergeImpactParticleV266{ animation:mergeParticle267 .58s cubic-bezier(.1,.72,.18,1) var(--delay) both!important; } @keyframes mergeParticle267{ 0%{opacity:0;transform:translate(0,0) scale(.55)} 10%{opacity:1;transform:translate(0,0) scale(1.35)} 68%{opacity:1} 100%{opacity:0;transform:translate(var(--px),var(--py)) scale(.22)} } /* v268 — hard handoff: flight FX can never cover the landed artifact */ .artifactTrailCanvasV259{z-index:2147483638!important;pointer-events:none!important} .artifactFlyGhostV259{z-index:2147483640!important} #depot #mergeBoard .artifactCell.queue-real-enter{ z-index:2147483642!important; } #depot #mergeBoard .artifactCell.queue-real-enter img, #depot #mergeBoard .artifactCell img.queue-real-img-enter{ z-index:2147483643!important; opacity:1!important; animation:queueRealArtifact268 .14s cubic-bezier(.2,.8,.25,1) both!important; } @keyframes queueRealArtifact268{ 0%{opacity:.82;transform:scale(.94)} 100%{opacity:1;transform:scale(1)} } /* v269 — chain reaction temporarily replaces Dynasty Charge content, same exact bar size */ #depot .dynastyCharge{position:relative!important;overflow:hidden!important} #depot .dynastyCharge>span, #depot .dynastyCharge>div:not(.dynastyInlineReaction), #depot .dynastyCharge>b{ transition:opacity .18s ease,transform .18s ease!important } #depot .dynastyCharge.reaction>span, #depot .dynastyCharge.reaction>div:not(.dynastyInlineReaction), #depot .dynastyCharge.reaction>b{ opacity:0!important;transform:scale(.97)!important } #depot .dynastyInlineReaction{ position:absolute!important;inset:0!important; display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important; opacity:0!important;transform:translateY(4px) scale(.98)!important; pointer-events:none!important; background:linear-gradient(90deg,rgba(72,35,145,.10),rgba(83,42,160,.26),rgba(231,174,72,.12))!important; transition:opacity .20s ease,transform .22s ease!important; white-space:nowrap!important } #depot .dynastyCharge.reaction .dynastyInlineReaction{opacity:1!important;transform:translateY(0) scale(1)!important} #depot .dynastyInlineReaction small{font-size:6px!important;letter-spacing:1.15px!important;color:#b7a7e9!important} #depot .dynastyInlineReaction strong{font-size:10px!important;line-height:1!important;letter-spacing:.5px!important;color:#fff!important;text-shadow:0 0 10px rgba(169,99,255,.55)!important} #depot .dynastyInlineReaction em{font-style:normal!important;font-size:6px!important;letter-spacing:.8px!important;color:#f0ce72!important} #dynastyCombo{display:none!important} /* v274 — restore Dynasty Charge position/geometry above Depot board */ #depot #dynastyCharge.dynastyCharge{ box-sizing:border-box!important; width:calc(100% - 18px)!important; max-width:760px!important; margin:0 auto 14px!important; padding:7px 10px!important; min-height:29px!important; height:29px!important; display:grid!important; grid-template-columns:auto minmax(0,1fr) 30px!important; align-items:center!important; gap:8px!important; position:relative!important; top:0!important;left:auto!important;right:auto!important; transform:none!important; } #depot #dynastyCharge.dynastyCharge.reaction{transform:none!important} #depot #dynastyCharge .dynastyInlineReaction{ box-sizing:border-box!important; position:absolute!important;inset:0!important; width:100%!important;height:100%!important; margin:0!important;padding:0 10px!important; } /* v285 — Android only: reveal the bottom edge of the Life card without affecting iPhone */ @media (hover:none) and (pointer:coarse) and (max-width:600px){ html:not(.ios) #life>.stage>.scene{ margin-bottom:8px!important; } html:not(.ios) #life>.stage>#tap{ margin-top:8px!important; } } /* v288 — lightweight Depot merge animation (mobile/Safari optimized) */ .mergeImpactV288{position:fixed;width:0;height:0;z-index:2147483647;pointer-events:none;contain:layout style paint;transform:translateZ(0)} .mergeImpactV288 i{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;opacity:0;background:#ffe27a;box-shadow:0 0 4px rgba(255,190,65,.75);will-change:transform,opacity} .mergeImpactV288.go i{animation:mergeSpark288 .34s cubic-bezier(.18,.72,.2,1) both} .mergeImpactV288 i:nth-child(1){--x:34px;--y:0px}.mergeImpactV288 i:nth-child(2){--x:29px;--y:17px}.mergeImpactV288 i:nth-child(3){--x:17px;--y:29px}.mergeImpactV288 i:nth-child(4){--x:0px;--y:34px}.mergeImpactV288 i:nth-child(5){--x:-17px;--y:29px}.mergeImpactV288 i:nth-child(6){--x:-29px;--y:17px}.mergeImpactV288 i:nth-child(7){--x:-34px;--y:0px}.mergeImpactV288 i:nth-child(8){--x:-29px;--y:-17px}.mergeImpactV288 i:nth-child(9){--x:-17px;--y:-29px}.mergeImpactV288 i:nth-child(10){--x:0px;--y:-34px}.mergeImpactV288 i:nth-child(11){--x:17px;--y:-29px}.mergeImpactV288 i:nth-child(12){--x:29px;--y:-17px} @keyframes mergeSpark288{0%{opacity:0;transform:translate3d(0,0,0) scale(.7)}18%{opacity:1}100%{opacity:0;transform:translate3d(var(--x),var(--y),0) scale(.2)}} #depot #mergeBoard .artifactCell.mergeLiteV288{z-index:40!important;will-change:transform;animation:mergeLitePop288 .32s cubic-bezier(.2,.82,.25,1.15) both!important} @keyframes mergeLitePop288{0%{transform:translateZ(0) scale(.84)}55%{transform:translateZ(0) scale(1.08)}100%{transform:translateZ(0) scale(1)}} /* v291 — colorful but lightweight Depot polish; effects stay below iPhone top chrome */ .mergeImpactV288{z-index:1200!important} .mergeFlashV291,.mergeRingV291{position:absolute;left:0;top:0;pointer-events:none;will-change:transform,opacity} .mergeFlashV291{width:42px;height:42px;margin:-21px;border-radius:50%;opacity:0;background:radial-gradient(circle,rgba(255,255,225,.9) 0%,rgba(255,213,76,.62) 22%,rgba(255,91,199,.28) 48%,rgba(104,91,255,.12) 66%,transparent 74%)} .mergeRingV291{width:24px;height:24px;margin:-12px;border-radius:50%;opacity:0;border:2px solid rgba(255,218,102,.8);box-shadow:0 0 7px rgba(255,104,205,.45)} .mergeImpactV288.go .mergeFlashV291{animation:mergeFlash291 .32s ease-out both} .mergeImpactV288.go .mergeRingV291{animation:mergeRing291 .38s cubic-bezier(.16,.72,.22,1) both} .mergeImpactV288 i:nth-of-type(3n){background:#ff75c8}.mergeImpactV288 i:nth-of-type(3n+1){background:#ffe06b}.mergeImpactV288 i:nth-of-type(3n+2){background:#8bdcff} @keyframes mergeFlash291{0%{opacity:0;transform:translateZ(0) scale(.35)}24%{opacity:.92;transform:translateZ(0) scale(.82)}100%{opacity:0;transform:translateZ(0) scale(1.45)}} @keyframes mergeRing291{0%{opacity:0;transform:translateZ(0) scale(.45)}25%{opacity:.8}100%{opacity:0;transform:translateZ(0) scale(2.55)}} #depot #mergeBoard .artifactCell.mergeLiteV288:after{content:"";position:absolute;inset:12%;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(255,231,117,.38),rgba(255,106,205,.15) 46%,transparent 70%);animation:mergeCellGlow291 .34s ease-out both} @keyframes mergeCellGlow291{0%{opacity:0;transform:scale(.55)}35%{opacity:1}100%{opacity:0;transform:scale(1.28)}} .artifactFlyGhostV259{z-index:1199!important} .artifactTrailCanvasV259{z-index:1198!important} @supports(padding:max(0px)){ .mergeImpactV288,.artifactFlyGhostV259,.artifactTrailCanvasV259{clip-path:inset(max(env(safe-area-inset-top),0px) 0 0 0)} } /* v293 — visible iPhone-safe flight/landing/merge wow effect */ .artifactFlyGhostV259{filter:none!important} .artifactFlyGhostV259 img{filter:drop-shadow(0 4px 5px rgba(0,0,0,.42)) drop-shadow(0 0 9px rgba(255,201,72,.72))!important} .artifactFlyGhostV259.landingV293 img{animation:artifactLandingGlow293 .34s ease-out both!important} @keyframes artifactLandingGlow293{0%{filter:drop-shadow(0 0 9px rgba(255,201,72,.72)) brightness(1)}45%{filter:drop-shadow(0 0 13px rgba(255,222,106,.92)) brightness(1.22)}100%{filter:drop-shadow(0 0 5px rgba(255,201,72,.28)) brightness(1)}} #depot #mergeBoard .artifactCell.queue-real-enter{z-index:55!important} #depot #mergeBoard .artifactCell.queue-real-enter:before{content:"";position:absolute;inset:-8%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,244,172,.72) 0%,rgba(255,179,73,.30) 34%,rgba(255,91,205,.18) 54%,transparent 72%);animation:queueLandingAura293 .46s ease-out both} @keyframes queueLandingAura293{0%{opacity:0;transform:translateZ(0) scale(.45)}28%{opacity:1}100%{opacity:0;transform:translateZ(0) scale(1.32)}} .mergeRingV293{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;pointer-events:none;opacity:0;border:2px solid rgba(139,220,255,.75);will-change:transform,opacity} .mergeImpactV288.go .mergeRingV293{animation:mergeRing293 .42s .035s cubic-bezier(.16,.72,.22,1) both} @keyframes mergeRing293{0%{opacity:0;transform:translateZ(0) scale(.35)}24%{opacity:.72}100%{opacity:0;transform:translateZ(0) scale(3.15)}} /* v294 — image-based VFX, optimized for iPhone/Safari */ .artifactFlyGhostV294{position:fixed;z-index:1202;pointer-events:none;will-change:transform;transform-origin:center;contain:layout style paint} .artifactFlyGhostV294 img{width:100%;height:100%;object-fit:contain;display:block} .artifactFlyGhostV294.handoff{opacity:0;transition:opacity .16s ease} .artifactFlightTrailV294{position:fixed;left:0;top:0;width:184px;height:92px;object-fit:contain;z-index:1201;pointer-events:none;transform-origin:center;will-change:transform,opacity;mix-blend-mode:screen} .artifactFlightTrailV294.finish{opacity:0!important;transition:opacity .16s ease} .artifactLandingFxV294{position:fixed;width:132px;height:132px;margin:-66px 0 0 -66px;object-fit:contain;z-index:1200;pointer-events:none;opacity:0;transform:translateZ(0) scale(.35);will-change:transform,opacity;mix-blend-mode:screen} .artifactLandingFxV294.go{animation:landingAsset294 .42s cubic-bezier(.16,.76,.22,1) both} @keyframes landingAsset294{0%{opacity:0;transform:translateZ(0) scale(.32)}22%{opacity:.9}100%{opacity:0;transform:translateZ(0) scale(1.08)}} .mergeAssetFxV294{position:fixed;width:0;height:0;z-index:1200;pointer-events:none} .mergeAssetFxV294 img{position:absolute;left:0;top:0;object-fit:contain;pointer-events:none;opacity:0;will-change:transform,opacity;mix-blend-mode:screen} .mergeBurstAssetV294{width:154px;height:104px;margin:-52px 0 0 -77px} .mergeRingAssetV294{width:142px;height:96px;margin:-48px 0 0 -71px} .mergeAssetFxV294.go .mergeBurstAssetV294{animation:mergeBurstAsset294 .44s ease-out both} .mergeAssetFxV294.go .mergeRingAssetV294{animation:mergeRingAsset294 .52s .035s cubic-bezier(.16,.72,.22,1) both} @keyframes mergeBurstAsset294{0%{opacity:0;transform:translateZ(0) scale(.32)}20%{opacity:.88}100%{opacity:0;transform:translateZ(0) scale(1.05)}} @keyframes mergeRingAsset294{0%{opacity:0;transform:translateZ(0) scale(.35)}24%{opacity:.74}100%{opacity:0;transform:translateZ(0) scale(1.22)}} @supports(padding:max(0px)){.artifactFlyGhostV294,.artifactFlightTrailV294,.artifactLandingFxV294,.mergeAssetFxV294{clip-path:inset(max(env(safe-area-inset-top),0px) 0 0 0)}} /* v295 — stronger readable PNG VFX without covering the artifact */ .artifactFlightTrailV294{width:264px!important;height:132px!important;opacity:.94;filter:saturate(1.18) brightness(1.12)} .artifactFlyGhostV294{z-index:1210!important} .artifactLandingFxV294{width:188px!important;height:188px!important;margin:-94px 0 0 -94px!important;z-index:1204!important} .artifactLandingFxV294.go{animation-duration:.56s!important} #depot #mergeBoard .artifactCell.queue-real-enter{z-index:1211!important;animation:queuePop295 .42s cubic-bezier(.18,.82,.22,1.12) both!important} @keyframes queuePop295{0%{transform:translateZ(0) scale(.78)}55%{transform:translateZ(0) scale(1.10)}100%{transform:translateZ(0) scale(1)}} .mergeAssetFxV294{z-index:1204!important} .mergeBurstAssetV294{width:218px!important;height:146px!important;margin:-73px 0 0 -109px!important} .mergeRingAssetV294{width:204px!important;height:138px!important;margin:-69px 0 0 -102px!important} .mergeAssetFxV294.go .mergeBurstAssetV294{animation-duration:.54s!important} .mergeAssetFxV294.go .mergeRingAssetV294{animation-duration:.62s!important} #depot #mergeBoard .artifactCell.mergeLiteV288{z-index:1210!important} /* v296 — iPhone stability pass: fixed coordinates, restrained VFX, clean handoff */ .artifactFlightTrailV294{left:0;top:0;width:264px!important;height:132px!important;mix-blend-mode:normal!important;filter:none!important;opacity:.82;transform-origin:50% 50%!important} .artifactLandingFxV294,.mergeAssetFxV294 img{mix-blend-mode:normal!important;filter:none!important} .artifactLandingFxV294{width:156px!important;height:156px!important;margin:-78px 0 0 -78px!important} .mergeBurstAssetV294{width:178px!important;height:120px!important;margin:-60px 0 0 -89px!important} .mergeRingAssetV294{width:168px!important;height:114px!important;margin:-57px 0 0 -84px!important} .artifactFlyGhostV294{backface-visibility:hidden;-webkit-backface-visibility:hidden} #depot #mergeBoard .artifactCell.queue-real-enter{animation:queuePop296 .34s cubic-bezier(.2,.78,.25,1.08) both!important} @keyframes queuePop296{0%{transform:translateZ(0) scale(.88)}58%{transform:translateZ(0) scale(1.055)}100%{transform:translateZ(0) scale(1)}} /* v297 — clean flight compositor: effect behind icon, no giant texture crossing the board */ .artifactFlyGhostV297{position:fixed;z-index:1210;pointer-events:none;will-change:transform,opacity;transform-origin:center;backface-visibility:hidden;-webkit-backface-visibility:hidden} .artifactFlyGhostV297 img{width:100%;height:100%;object-fit:contain;display:block} .artifactFlyGhostV297.out{opacity:0;transition:opacity .14s ease} .artifactTrailV297{position:fixed;left:0;top:0;width:236px;height:96px;z-index:1200;pointer-events:none;will-change:transform,opacity;transform-origin:50% 50%;overflow:hidden;contain:strict} .artifactTrailV297 img{position:absolute;width:236px;height:118px;left:0;top:-11px;object-fit:cover;object-position:center;opacity:.68;transform:scaleX(-1)} .artifactTrailV297.out{opacity:0!important;transition:opacity .15s ease} .artifactLandingV297{position:fixed;width:126px;height:126px;margin:-63px 0 0 -63px;z-index:1204;pointer-events:none;object-fit:contain;opacity:0;will-change:transform,opacity} .artifactLandingV297.go{animation:landing297 .46s cubic-bezier(.18,.74,.2,1) both} @keyframes landing297{0%{opacity:0;transform:translateZ(0) scale(.42)}24%{opacity:.78;transform:translateZ(0) scale(.72)}100%{opacity:0;transform:translateZ(0) scale(1.04)}} #depot #mergeBoard .artifactCell.queue-real-enter{animation:queue297 .30s cubic-bezier(.2,.8,.25,1.08) both!important} @keyframes queue297{0%{transform:translateZ(0) scale(.90)}58%{transform:translateZ(0) scale(1.045)}100%{transform:translateZ(0) scale(1)}} @supports(padding:max(0px)){.artifactFlyGhostV297,.artifactTrailV297,.artifactLandingV297{clip-path:inset(max(env(safe-area-inset-top),0px) 0 0 0)}} /* v298 — true trailing comet, never rotate the rectangular PNG around the artifact */ .artifactTrailV297{width:210px!important;height:104px!important;overflow:visible!important;transform-origin:100% 50%!important;opacity:.72} .artifactTrailV297 img{width:210px!important;height:104px!important;left:0!important;top:0!important;object-fit:contain!important;object-position:right center!important;transform:none!important;opacity:.76!important;mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.32) 24%,#000 72%,#000 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.32) 24%,#000 72%,#000 100%)} /* v299 — restored proven canvas trail; current landing/merge effects remain */ .artifactTrailCanvasV299{position:fixed;inset:0;z-index:1200;pointer-events:none;opacity:1;transition:opacity .12s ease} /* v300 — tap rewards stay above the hero card; suppress Safari top-left ghost frame */ .artifactReward{will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden} .artifactReward:not(.show):not(.toDepot){visibility:hidden} .artifactReward.show,.artifactReward.toDepot{visibility:visible} /* v303 — unique cat name on Life card; rarity badge remains unchanged */ .heroCard .heroCatName{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:8;max-width:42%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;font-size:11px;font-weight:900;letter-spacing:1.2px;color:#f5e8c3;text-transform:uppercase;text-shadow:0 2px 8px #000,0 0 10px rgba(255,205,110,.22);pointer-events:none} /* v304 — cat name lives in the bottom black strip on each Life card */ .heroCard .cardInfo{min-height:36px!important;padding:8px 12px!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:8!important} .heroCard .cardInfo .heroCatName{position:static!important;transform:none!important;max-width:100%!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:12px!important;font-weight:1000!important;letter-spacing:1.4px!important;color:#f5e8c3!important;text-transform:uppercase;text-shadow:0 2px 8px #000,0 0 10px rgba(255,205,110,.22);pointer-events:none} /* v305 — cat name belongs in the bottom black nameplate, as marked */ .heroCard .cardInfo{left:13px!important;right:13px!important;top:auto!important;bottom:12px!important;height:30px!important;min-height:30px!important;padding:0 12px!important;border-radius:14px!important;display:flex!important;align-items:center!important;justify-content:center!important} .heroCard .cardInfo .heroCatName{display:block!important;line-height:30px!important;font-size:12px!important} /* v306 — align bottom cat name and keep FEED button clear of nameplate */ .heroCard .cardInfo{ left:24px!important;right:24px!important;bottom:10px!important; height:28px!important;min-height:28px!important;padding:0 10px!important; box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important; } .heroCard .cardInfo .heroCatName{ width:100%!important;margin:0!important;padding:0!important; line-height:28px!important;text-align:center!important; } #life #tap{ margin-bottom:48px!important; } /* v307 — compact bottom cat-name frame, clear separation from FEED button */ .heroCard .cardInfo{ left:42px!important; right:42px!important; bottom:10px!important; height:24px!important; min-height:24px!important; padding:0 10px!important; border-radius:12px!important; box-sizing:border-box!important; display:flex!important; align-items:center!important; justify-content:center!important; } .heroCard .cardInfo .heroCatName{ width:100%!important; line-height:24px!important; font-size:11px!important; letter-spacing:1.25px!important; text-align:center!important; } #life #tap{ margin-bottom:54px!important; } /* v308 — nudge FEED button slightly higher */ #life #tap{transform:translateY(-7px)!important} /* v315 — clearer active Depot playfield without changing layout */ #depot #mergeBoard{ border:1px solid rgba(111,151,255,.38)!important; box-shadow:inset 0 0 0 1px rgba(114,154,255,.10),0 0 18px rgba(54,91,190,.12)!important; } #depot #mergeBoard .artifactCell:not(.locked){ border-color:rgba(113,151,235,.34)!important; box-shadow:inset 0 0 0 1px rgba(105,145,225,.08)!important; } #depot #mergeBoard .artifactCell.locked{ border-color:rgba(80,88,112,.13)!important; box-shadow:none!important; filter:brightness(.62) saturate(.72)!important; } /* v317 — decorative cat frame around Depot board; gameplay grid untouched */ #depot #mergeBoard{position:relative!important;overflow:visible!important} #depot #mergeBoard::after{ content:""!important; position:absolute!important; z-index:20!important; pointer-events:none!important; left:-14px!important;right:-14px!important;top:-14px!important;bottom:-14px!important; background:url("assets/E3C0A229-99FA-4867-A861-4270A0FFFF26.png?v=317") center/100% 100% no-repeat!important; } /* v318 — move decorative Depot frame fully outside the playable cells */ #depot #mergeBoard::after{ left:-23px!important; right:-23px!important; top:-27px!important; bottom:-27px!important; } /* v318 — frame sits outside the Depot cells instead of covering them */ #depot #mergeBoard::after{ left:-24px!important; right:-24px!important; top:-24px!important; bottom:-24px!important; background-size:100% 100%!important; } /* v319 — new thin Depot frame matched to playfield proportions */ #depot #mergeBoard::after{ left:-10px!important; right:-10px!important; top:-10px!important; bottom:-10px!important; background-image:url("assets/3970F898-BACE-4385-BAD2-D1B8080F62ED.png?v=319")!important; background-position:center!important; background-repeat:no-repeat!important; background-size:100% 100%!important; } /* v320 — move decorative Depot frame clear of edge cells */ #depot #mergeBoard::after{ left:-24px!important; right:-24px!important; top:-19px!important; bottom:-19px!important; } /* v321 — clear first/last Depot rows while preserving side fit */ #depot #mergeBoard::after{ left:-24px!important; right:-24px!important; top:-31px!important; bottom:-27px!important; } /* v322 — further vertical Depot frame adjustment */ #depot #mergeBoard::after{ top:-55px!important; bottom:-37px!important; } /* v323 — raise Depot frame top another 15px */ #depot #mergeBoard::after{top:-70px!important} /* v324 — lower Depot frame top 10px */ #depot #mergeBoard::after{top:-60px!important} /* v325 — responsive Depot frame anchored to the actual board bounds */ #depot #mergeBoard{ position:relative!important; overflow:visible!important; } #depot #mergeBoard::after{ left:-5%!important; right:-5%!important; top:-7%!important; bottom:-7%!important; width:auto!important; height:auto!important; background-image:url("assets/3970F898-BACE-4385-BAD2-D1B8080F62ED.png?v=325")!important; background-size:100% 100%!important; background-position:center!important; background-repeat:no-repeat!important; pointer-events:none!important; } /* v326 — native responsive neon frame; decorative PNG frame disabled */ #depot #mergeBoard{ position:relative!important; overflow:visible!important; border:2px solid rgba(255,91,224,.92)!important; border-radius:18px!important; box-shadow: 0 0 0 2px rgba(112,77,255,.28), 0 0 10px rgba(255,71,211,.58), 0 0 24px rgba(103,79,255,.32), inset 0 0 12px rgba(255,112,220,.10)!important; } #depot #mergeBoard::after{ content:""!important; position:absolute!important; z-index:20!important; pointer-events:none!important; inset:-7px!important; width:auto!important; height:auto!important; border-radius:23px!important; border:1px solid rgba(255,178,72,.78)!important; background:none!important; box-shadow: 0 0 7px rgba(255,177,55,.60), 0 0 15px rgba(255,72,214,.42), inset 0 0 8px rgba(255,188,73,.24)!important; } #depot #mergeBoard::before{ content:""!important; position:absolute!important; z-index:19!important; pointer-events:none!important; inset:-12px!important; border-radius:27px!important; border:1px solid rgba(105,104,255,.30)!important; box-shadow:0 0 18px rgba(92,81,255,.24)!important; } /* v327 — animated electric gradient around Depot board */ #depot #mergeBoard{ border:2px solid transparent!important; background: linear-gradient(#0c1324,#0c1324) padding-box, linear-gradient(115deg,#6c5cff,#ff43d1,#ffb13b,#6ee7ff,#9b5cff,#ff43d1) border-box!important; background-size:100% 100%,400% 400%!important; animation:depotElectricFlow 3.2s linear infinite!important; box-shadow: 0 0 8px rgba(255,67,209,.42), 0 0 20px rgba(108,92,255,.28), inset 0 0 10px rgba(110,231,255,.08)!important; } #depot #mergeBoard::after{ inset:-7px!important; border:2px solid transparent!important; background: linear-gradient(transparent,transparent) padding-box, linear-gradient(100deg,#6ee7ff,#765cff,#ff43d1,#ffb13b,#ffffff,#6ee7ff) border-box!important; background-size:100% 100%,500% 500%!important; animation:depotElectricFlow 2.1s linear infinite reverse,depotElectricPulse 1.25s ease-in-out infinite!important; box-shadow: 0 0 7px rgba(110,231,255,.58), 0 0 16px rgba(255,67,209,.46), 0 0 26px rgba(118,92,255,.24)!important; } #depot #mergeBoard::before{ inset:-12px!important; border:1px solid rgba(118,92,255,.34)!important; animation:depotElectricPulse 1.65s ease-in-out infinite!important; box-shadow:0 0 18px rgba(118,92,255,.30),inset 0 0 8px rgba(110,231,255,.10)!important; } @keyframes depotElectricFlow{ 0%{background-position:0 0,0% 50%} 50%{background-position:0 0,100% 50%} 100%{background-position:0 0,0% 50%} } @keyframes depotElectricPulse{ 0%,100%{filter:brightness(.9);opacity:.78} 50%{filter:brightness(1.45);opacity:1} } @media (prefers-reduced-motion:reduce){ #depot #mergeBoard,#depot #mergeBoard::before,#depot #mergeBoard::after{animation:none!important} } /* v328 — fix Depot board fill: animate only the frame, never the board interior */ #depot #mergeBoard{ border:2px solid rgba(126,101,255,.72)!important; background:rgba(8,14,29,.92)!important; background-size:auto!important; animation:none!important; box-shadow: 0 0 8px rgba(255,67,209,.28), 0 0 18px rgba(108,92,255,.22), inset 0 0 10px rgba(110,231,255,.06)!important; } #depot #mergeBoard::after{ inset:-7px!important; border:2px solid transparent!important; border-radius:23px!important; background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)) padding-box, linear-gradient(100deg,#6ee7ff,#765cff,#ff43d1,#ffb13b,#ffffff,#6ee7ff) border-box!important; background-size:100% 100%,500% 500%!important; animation:depotElectricFlow 2.1s linear infinite reverse,depotElectricPulse 1.25s ease-in-out infinite!important; } /* v328 — fix Depot board fill: animate only the border, never the playfield */ #depot #mergeBoard{ border:1px solid rgba(111,151,255,.34)!important; background:rgba(8,14,28,.82)!important; background-size:auto!important; animation:none!important; box-shadow:inset 0 0 0 1px rgba(105,145,225,.08),0 0 16px rgba(73,86,190,.14)!important; } #depot #mergeBoard::after{ inset:-7px!important; padding:2px!important; border:0!important; border-radius:23px!important; background:linear-gradient(110deg,#6ee7ff,#765cff,#ff43d1,#ffb13b,#ffffff,#6ee7ff)!important; background-size:400% 400%!important; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important; -webkit-mask-composite:xor!important; mask-composite:exclude!important; animation:depotElectricBorder 2.2s linear infinite,depotElectricPulse 1.25s ease-in-out infinite!important; box-shadow:0 0 8px rgba(110,231,255,.46),0 0 18px rgba(255,67,209,.35)!important; } @keyframes depotElectricBorder{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } /* v331 — Depot uses the full available screen width */ #depot{ margin-left:-12px!important; margin-right:-12px!important; width:calc(100% + 24px)!important; } #depot #dynastyCharge{ width:calc(100% - 18px)!important; max-width:none!important; } #depot #mergeBoard.artifactBoard{ width:calc(100% - 16px)!important; margin-left:auto!important; margin-right:auto!important; box-sizing:border-box!important; } #depot #artifactQueue{ width:calc(100% - 32px)!important; margin-left:auto!important; margin-right:auto!important; box-sizing:border-box!important; } /* v332 — restore the original v327 animated electric frame dimensions */ #depot #mergeBoard::after{ inset:-7px!important; border-radius:23px!important; } #depot #mergeBoard::before{ inset:-12px!important; border-radius:27px!important; border:1px solid rgba(105,104,255,.30)!important; animation:depotElectricPulse 1.65s ease-in-out infinite!important; box-shadow:0 0 18px rgba(92,81,255,.24),inset 0 0 8px rgba(110,231,255,.10)!important; } /* v333 — electric frame follows the board itself on every screen */ #depot #mergeBoard.artifactBoard{ position:relative!important; box-sizing:border-box!important; } #depot #mergeBoard::after{ box-sizing:border-box!important; inset:-6px!important; width:auto!important; height:auto!important; border-radius:calc(24px + 6px)!important; } #depot #mergeBoard::before{ box-sizing:border-box!important; inset:-10px!important; width:auto!important; height:auto!important; border-radius:calc(24px + 10px)!important; } /* v334 — frame touches the board: no background gap between them */ #depot #mergeBoard::after{ inset:-3px!important; padding:3px!important; border-radius:27px!important; } #depot #mergeBoard::before{ inset:-6px!important; border-radius:30px!important; } /* v340 — calmer v334 frame: 20% softer with a clearer edge color sweep */ #depot #mergeBoard::after{ opacity:.80!important; background:linear-gradient(110deg,#6ee7ff 0%,#765cff 22%,#ff43d1 44%,#ffb13b 64%,#ffffff 80%,#6ee7ff 100%)!important; background-size:300% 300%!important; animation:depotElectricBorderCalm 5.4s ease-in-out infinite!important; box-shadow:0 0 6px rgba(110,231,255,.30),0 0 13px rgba(255,67,209,.22)!important; } #depot #mergeBoard::before{ opacity:.80!important; animation:depotElectricPulseCalm 3.8s ease-in-out infinite!important; box-shadow:0 0 13px rgba(92,81,255,.16),inset 0 0 6px rgba(110,231,255,.07)!important; } @keyframes depotElectricBorderCalm{ 0%{background-position:0% 50%;filter:brightness(.92)} 50%{background-position:100% 50%;filter:brightness(1.10)} 100%{background-position:0% 50%;filter:brightness(.92)} } @keyframes depotElectricPulseCalm{ 0%,100%{filter:brightness(.92);opacity:.62} 50%{filter:brightness(1.08);opacity:.80} } /* v341 — restore active gradient motion, make frame another 30% more transparent */ #depot #mergeBoard::after{ opacity:.50!important; background-size:400% 400%!important; animation:depotElectricBorder 2.2s linear infinite,depotElectricPulseSoft 1.65s ease-in-out infinite!important; box-shadow:0 0 5px rgba(110,231,255,.22),0 0 10px rgba(255,67,209,.16)!important; } #depot #mergeBoard::before{ opacity:.50!important; animation:depotElectricPulseSoft 1.9s ease-in-out infinite!important; box-shadow:0 0 10px rgba(92,81,255,.12),inset 0 0 5px rgba(110,231,255,.05)!important; } @keyframes depotElectricPulseSoft{ 0%,100%{filter:brightness(.92);opacity:.38} 50%{filter:brightness(1.16);opacity:.50} } /* v342 — faster active gradient, another 15% transparency */ #depot #mergeBoard::after{ opacity:.35!important; background-size:450% 450%!important; animation:depotElectricBorder 1.45s linear infinite,depotElectricPulseSoft342 1.15s ease-in-out infinite!important; box-shadow:0 0 4px rgba(110,231,255,.17),0 0 8px rgba(255,67,209,.12)!important; } #depot #mergeBoard::before{ opacity:.35!important; animation:depotElectricPulseSoft342 1.35s ease-in-out infinite!important; box-shadow:0 0 8px rgba(92,81,255,.09),inset 0 0 4px rgba(110,231,255,.04)!important; } @keyframes depotElectricPulseSoft342{ 0%,100%{filter:brightness(.90);opacity:.25} 50%{filter:brightness(1.22);opacity:.35} } /* v343 — stronger visible motion concentrated on the frame edges */ #depot #mergeBoard::after{ opacity:.35!important; background:linear-gradient(90deg, #6ee7ff 0%,#6ee7ff 8%, #765cff 18%,#ff43d1 30%, #ffb13b 42%,#ffffff 50%, #6ee7ff 58%,#765cff 70%, #ff43d1 82%,#ffb13b 92%,#6ee7ff 100%)!important; background-size:650% 100%!important; animation:depotEdgeSweep343 1.15s linear infinite,depotEdgePulse343 1.05s ease-in-out infinite!important; filter:saturate(1.35)!important; box-shadow:0 0 6px rgba(110,231,255,.20),0 0 11px rgba(255,67,209,.15)!important; } #depot #mergeBoard::before{ opacity:.35!important; animation:depotEdgePulse343 1.2s ease-in-out infinite!important; } @keyframes depotEdgeSweep343{ 0%{background-position:0% 50%} 100%{background-position:100% 50%} } @keyframes depotEdgePulse343{ 0%,100%{filter:brightness(.88) saturate(1.15);opacity:.24} 50%{filter:brightness(1.38) saturate(1.5);opacity:.35} } /* v344 — full-opacity Depot frame, keep v343 edge motion */ #depot #mergeBoard::after{ opacity:1!important; } #depot #mergeBoard::before{ opacity:1!important; } @keyframes depotEdgePulse343{ 0%,100%{filter:brightness(.88) saturate(1.15);opacity:1} 50%{filter:brightness(1.38) saturate(1.5);opacity:1} } /* v345 — clearly moving perimeter gradient (Safari/iPhone-safe) */ #depot #mergeBoard::after{ opacity:1!important; background:linear-gradient(110deg, #6ee7ff 0%,#765cff 14%,#ff43d1 28%,#ffb13b 42%,#ffffff 50%, #6ee7ff 58%,#765cff 72%,#ff43d1 86%,#ffb13b 100%)!important; background-size:500% 500%!important; animation:depotEdgeTravel345 2.4s linear infinite!important; will-change:background-position,filter!important; } #depot #mergeBoard::before{ opacity:1!important; animation:depotOuterPulse345 1.8s ease-in-out infinite!important; } @-webkit-keyframes depotEdgeTravel345{ 0%{background-position:0% 0%;filter:brightness(.85) saturate(1.2)} 25%{background-position:100% 0%;filter:brightness(1.25) saturate(1.45)} 50%{background-position:100% 100%;filter:brightness(.95) saturate(1.3)} 75%{background-position:0% 100%;filter:brightness(1.3) saturate(1.5)} 100%{background-position:0% 0%;filter:brightness(.85) saturate(1.2)} } @keyframes depotEdgeTravel345{ 0%{background-position:0% 0%;filter:brightness(.85) saturate(1.2)} 25%{background-position:100% 0%;filter:brightness(1.25) saturate(1.45)} 50%{background-position:100% 100%;filter:brightness(.95) saturate(1.3)} 75%{background-position:0% 100%;filter:brightness(1.3) saturate(1.5)} 100%{background-position:0% 0%;filter:brightness(.85) saturate(1.2)} } @keyframes depotOuterPulse345{ 0%,100%{filter:brightness(.8);box-shadow:0 0 8px rgba(92,81,255,.22),inset 0 0 5px rgba(110,231,255,.08)} 50%{filter:brightness(1.35);box-shadow:0 0 18px rgba(92,81,255,.42),inset 0 0 9px rgba(110,231,255,.18)} } /* v346 — true moving edge lights: independent bright bands travel around the perimeter */ #depot #mergeBoard::after{ opacity:1!important; inset:-3px!important; padding:3px!important; border-radius:27px!important; background:conic-gradient(from var(--depotEdgeAngle), rgba(110,231,255,.18) 0deg, #6ee7ff 22deg, rgba(110,231,255,.12) 52deg, rgba(118,92,255,.14) 82deg, #765cff 112deg, rgba(255,67,209,.12) 142deg, #ff43d1 172deg, rgba(255,177,59,.12) 202deg, #ffb13b 232deg, rgba(255,255,255,.12) 262deg, #ffffff 292deg, rgba(110,231,255,.14) 326deg, rgba(110,231,255,.18) 360deg)!important; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important; -webkit-mask-composite:xor!important; mask-composite:exclude!important; animation:depotEdgeSpin346 2.1s linear infinite!important; filter:drop-shadow(0 0 5px rgba(110,231,255,.62)) drop-shadow(0 0 8px rgba(255,67,209,.42))!important; } @property --depotEdgeAngle{ syntax:""; inherits:false; initial-value:0deg; } @keyframes depotEdgeSpin346{ from{--depotEdgeAngle:0deg} to{--depotEdgeAngle:360deg} } /* Safari fallback: rotate the masked conic layer itself, so motion is visible even without @property interpolation */ @supports not (background:paint(something)){ #depot #mergeBoard::after{ transform-origin:center!important; animation:depotEdgeRotate346 2.1s linear infinite!important; } } @keyframes depotEdgeRotate346{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} } /* v347 — Safari-safe edge-only animation: no rotating layer, no lines across playfield */ #depot #mergeBoard::after{ content:""!important; position:absolute!important; z-index:20!important; pointer-events:none!important; box-sizing:border-box!important; inset:-3px!important; padding:3px!important; border:0!important; border-radius:27px!important; transform:none!important; transform-origin:center!important; background: linear-gradient(90deg,transparent 0%,#6ee7ff 9%,#ffffff 14%,#ff43d1 20%,transparent 31%,transparent 100%) 0 0/320% 3px no-repeat, linear-gradient(180deg,transparent 0%,#765cff 9%,#ffffff 14%,#ffb13b 20%,transparent 31%,transparent 100%) 100% 0/3px 320% no-repeat, linear-gradient(270deg,transparent 0%,#ff43d1 9%,#ffffff 14%,#6ee7ff 20%,transparent 31%,transparent 100%) 100% 100%/320% 3px no-repeat, linear-gradient(0deg,transparent 0%,#ffb13b 9%,#ffffff 14%,#765cff 20%,transparent 31%,transparent 100%) 0 100%/3px 320% no-repeat!important; -webkit-mask:none!important; mask:none!important; filter:drop-shadow(0 0 4px rgba(110,231,255,.7)) drop-shadow(0 0 7px rgba(255,67,209,.42))!important; animation:depotEdgeRun347 2.8s linear infinite!important; } @-webkit-keyframes depotEdgeRun347{ 0%{background-position:-220% 0,100% -220%,320% 100%,0 320%} 100%{background-position:320% 0,100% 320%,-220% 100%,0 -220%} } @keyframes depotEdgeRun347{ 0%{background-position:-220% 0,100% -220%,320% 100%,0 320%} 100%{background-position:320% 0,100% 320%,-220% 100%,0 -220%} } #depot #mergeBoard::before{ transform:none!important; opacity:1!important; animation:depotOuterPulse347 2.4s ease-in-out infinite!important; } @keyframes depotOuterPulse347{ 0%,100%{filter:brightness(.92);box-shadow:0 0 8px rgba(92,81,255,.18),inset 0 0 4px rgba(110,231,255,.06)} 50%{filter:brightness(1.16);box-shadow:0 0 14px rgba(92,81,255,.32),inset 0 0 7px rgba(110,231,255,.12)} } /* v348 — hard-disable every old rotating transform from v346 */ #depot #mergeBoard::after{ transform:none!important; -webkit-transform:none!important; transform-origin:initial!important; -webkit-transform-origin:initial!important; animation-name:depotEdgeRun348!important; -webkit-animation-name:depotEdgeRun348!important; animation-duration:2.8s!important; -webkit-animation-duration:2.8s!important; animation-timing-function:linear!important; -webkit-animation-timing-function:linear!important; animation-iteration-count:infinite!important; -webkit-animation-iteration-count:infinite!important; } @-webkit-keyframes depotEdgeRun348{ 0%{-webkit-transform:none;transform:none;background-position:-220% 0,100% -220%,320% 100%,0 320%} 100%{-webkit-transform:none;transform:none;background-position:320% 0,100% 320%,-220% 100%,0 -220%} } @keyframes depotEdgeRun348{ 0%{-webkit-transform:none;transform:none;background-position:-220% 0,100% -220%,320% 100%,0 320%} 100%{-webkit-transform:none;transform:none;background-position:320% 0,100% 320%,-220% 100%,0 -220%} } /* v348 — hard override: frame geometry never rotates; only edge backgrounds move */ #depot #mergeBoard::after{ transform:none!important; -webkit-transform:none!important; rotate:none!important; animation-name:depotEdgeRun348!important; animation-duration:2.4s!important; animation-timing-function:linear!important; animation-iteration-count:infinite!important; } @-webkit-keyframes depotEdgeRun348{ 0%{-webkit-transform:none;transform:none;background-position:-220% 0,100% -220%,320% 100%,0 320%} 100%{-webkit-transform:none;transform:none;background-position:320% 0,100% 320%,-220% 100%,0 -220%} } @keyframes depotEdgeRun348{ 0%{transform:none;background-position:-220% 0,100% -220%,320% 100%,0 320%} 100%{transform:none;background-position:320% 0,100% 320%,-220% 100%,0 -220%} } /* v348 — hard-disable every old rotating transform; animate only edge backgrounds */ #depot #mergeBoard::after{ transform:none!important; -webkit-transform:none!important; transform-origin:initial!important; -webkit-transform-origin:initial!important; animation-name:depotEdgeRun348!important; -webkit-animation-name:depotEdgeRun348!important; animation-duration:2.8s!important; -webkit-animation-duration:2.8s!important; animation-timing-function:linear!important; -webkit-animation-timing-function:linear!important; animation-iteration-count:infinite!important; -webkit-animation-iteration-count:infinite!important; } @-webkit-keyframes depotEdgeRun348{ 0%{-webkit-transform:none;transform:none;background-position:-220% 0,100% -220%,320% 100%,0 320%} 100%{-webkit-transform:none;transform:none;background-position:320% 0,100% 320%,-220% 100%,0 -220%} } @keyframes depotEdgeRun348{ 0%{-webkit-transform:none;transform:none;background-position:-220% 0,100% -220%,320% 100%,0 320%} 100%{-webkit-transform:none;transform:none;background-position:320% 0,100% 320%,-220% 100%,0 -220%} } /* v348 — hard-disable all inherited rotation on Depot frame */ #depot #mergeBoard::after{ transform:none!important; rotate:none!important; -webkit-transform:none!important; -webkit-animation-name:depotEdgeRun348!important; animation-name:depotEdgeRun348!important; animation-duration:2.8s!important; animation-timing-function:linear!important; animation-iteration-count:infinite!important; } @-webkit-keyframes depotEdgeRun348{ 0%{-webkit-transform:none;transform:none;background-position:-220% 0,100% -220%,320% 100%,0 320%} 100%{-webkit-transform:none;transform:none;background-position:320% 0,100% 320%,-220% 100%,0 -220%} } @keyframes depotEdgeRun348{ 0%{transform:none;background-position:-220% 0,100% -220%,320% 100%,0 320%} 100%{transform:none;background-position:320% 0,100% 320%,-220% 100%,0 -220%} } /* v349 — Safari-safe visible runners: animate background-position in pixels, frame itself never rotates */ #depot #mergeBoard::after{ transform:none!important; -webkit-transform:none!important; rotate:none!important; opacity:1!important; background: linear-gradient(90deg,transparent 0 18%,#6ee7ff 25%,#fff 31%,#ff43d1 38%,transparent 46% 100%) 0 0/180px 3px repeat-x, linear-gradient(180deg,transparent 0 18%,#765cff 25%,#fff 31%,#ffb13b 38%,transparent 46% 100%) 100% 0/3px 180px repeat-y, linear-gradient(90deg,transparent 0 18%,#ff43d1 25%,#fff 31%,#6ee7ff 38%,transparent 46% 100%) 0 100%/180px 3px repeat-x, linear-gradient(180deg,transparent 0 18%,#ffb13b 25%,#fff 31%,#765cff 38%,transparent 46% 100%) 0 0/3px 180px repeat-y!important; animation:depotEdgeRunner349 1.35s linear infinite!important; -webkit-animation:depotEdgeRunner349 1.35s linear infinite!important; } @-webkit-keyframes depotEdgeRunner349{ from{-webkit-transform:none;transform:none;background-position:0 0,100% 0,0 100%,0 0} to{-webkit-transform:none;transform:none;background-position:180px 0,100% 180px,-180px 100%,0 -180px} } @keyframes depotEdgeRunner349{ from{transform:none;background-position:0 0,100% 0,0 100%,0 0} to{transform:none;background-position:180px 0,100% 180px,-180px 100%,0 -180px} } /* v349 — stationary frame with unmistakable moving light segments on each edge */ #depot #mergeBoard::after{ transform:none!important; -webkit-transform:none!important; rotate:none!important; opacity:1!important; background: linear-gradient(90deg,transparent 0 35%,#6ee7ff 43%,#fff 50%,#ff43d1 57%,transparent 65% 100%) 0 0/180px 3px repeat-x, linear-gradient(180deg,transparent 0 35%,#ff43d1 43%,#fff 50%,#ffb13b 57%,transparent 65% 100%) 100% 0/3px 180px repeat-y, linear-gradient(90deg,transparent 0 35%,#ffb13b 43%,#fff 50%,#765cff 57%,transparent 65% 100%) 0 100%/180px 3px repeat-x, linear-gradient(180deg,transparent 0 35%,#765cff 43%,#fff 50%,#6ee7ff 57%,transparent 65% 100%) 0 0/3px 180px repeat-y!important; animation:depotEdgeRun349 1.35s linear infinite!important; -webkit-animation:depotEdgeRun349 1.35s linear infinite!important; will-change:background-position!important; } @-webkit-keyframes depotEdgeRun349{ from{-webkit-transform:none;transform:none;background-position:0 0,100% 0,0 100%,0 0} to{-webkit-transform:none;transform:none;background-position:180px 0,100% 180px,-180px 100%,0 -180px} } @keyframes depotEdgeRun349{ from{transform:none;background-position:0 0,100% 0,0 100%,0 0} to{transform:none;background-position:180px 0,100% 180px,-180px 100%,0 -180px} } /* v349 — obvious Safari-safe motion: animate each edge's gradient position */ #depot #mergeBoard::after{ transform:none!important; -webkit-transform:none!important; rotate:none!important; opacity:1!important; background: linear-gradient(90deg,transparent 0 32%,#6ee7ff 40%,#fff 48%,#ff43d1 56%,transparent 66% 100%) 0 0/220% 3px no-repeat, linear-gradient(180deg,transparent 0 32%,#765cff 40%,#fff 48%,#ffb13b 56%,transparent 66% 100%) 100% 0/3px 220% no-repeat, linear-gradient(90deg,transparent 0 32%,#ff43d1 40%,#fff 48%,#6ee7ff 56%,transparent 66% 100%) 0 100%/220% 3px no-repeat, linear-gradient(180deg,transparent 0 32%,#ffb13b 40%,#fff 48%,#765cff 56%,transparent 66% 100%) 0 0/3px 220% no-repeat!important; -webkit-mask:none!important; mask:none!important; animation:depotEdgeRun349 1.55s linear infinite!important; -webkit-animation:depotEdgeRun349 1.55s linear infinite!important; } @-webkit-keyframes depotEdgeRun349{ 0%{background-position:-120% 0,100% -120%,220% 100%,0 220%;-webkit-transform:none;transform:none} 100%{background-position:220% 0,100% 220%,-120% 100%,0 -120%;-webkit-transform:none;transform:none} } @keyframes depotEdgeRun349{ 0%{background-position:-120% 0,100% -120%,220% 100%,0 220%;transform:none} 100%{background-position:220% 0,100% 220%,-120% 100%,0 -120%;transform:none} } /* v350 */ #depot #mergeBoard::after{ transform:none!important; -webkit-transform:none!important; opacity:1!important; background: linear-gradient(90deg,transparent 0 25%,#6ee7ff 34%,#fff 43%,#ff43d1 52%,transparent 64% 100%) var(--edge-x,0px) 0/180px 3px repeat-x, linear-gradient(180deg,transparent 0 25%,#ff43d1 34%,#fff 43%,#ffb13b 52%,transparent 64% 100%) 100% var(--edge-y,0px)/3px 180px repeat-y, linear-gradient(90deg,transparent 0 25%,#ffb13b 34%,#fff 43%,#765cff 52%,transparent 64% 100%) calc(0px - var(--edge-x,0px)) 100%/180px 3px repeat-x, linear-gradient(180deg,transparent 0 25%,#765cff 34%,#fff 43%,#6ee7ff 52%,transparent 64% 100%) 0 calc(0px - var(--edge-y,0px))/3px 180px repeat-y!important; animation:none!important; -webkit-animation:none!important; } /* v350 — iPhone/Safari: animate the four edge gradients by background-position-x/y */ #depot #mergeBoard::after{ transform:none!important; -webkit-transform:none!important; rotate:none!important; opacity:1!important; background: linear-gradient(90deg,transparent 0%,transparent 34%,#6ee7ff 41%,#fff 48%,#ff43d1 55%,transparent 64%,transparent 100%) 0 0/300% 4px no-repeat, linear-gradient(180deg,transparent 0%,transparent 34%,#765cff 41%,#fff 48%,#ffb13b 55%,transparent 64%,transparent 100%) 100% 0/4px 300% no-repeat, linear-gradient(90deg,transparent 0%,transparent 34%,#ff43d1 41%,#fff 48%,#6ee7ff 55%,transparent 64%,transparent 100%) 0 100%/300% 4px no-repeat, linear-gradient(180deg,transparent 0%,transparent 34%,#ffb13b 41%,#fff 48%,#765cff 55%,transparent 64%,transparent 100%) 0 0/4px 300% no-repeat!important; animation:depotEdgeMotion350 1.35s linear infinite!important; -webkit-animation:depotEdgeMotion350 1.35s linear infinite!important; filter:drop-shadow(0 0 5px rgba(110,231,255,.75)) drop-shadow(0 0 8px rgba(255,67,209,.48))!important; } @-webkit-keyframes depotEdgeMotion350{ 0%{background-position:100% 0,100% 100%,0 100%,0 0} 50%{background-position:0 0,100% 0,100% 100%,0 100%} 100%{background-position:100% 0,100% 100%,0 100%,0 0} } @keyframes depotEdgeMotion350{ 0%{background-position:100% 0,100% 100%,0 100%,0 0} 50%{background-position:0 0,100% 0,100% 100%,0 100%} 100%{background-position:100% 0,100% 100%,0 100%,0 0} } /* v351 — iOS reliable motion: JS updates CSS variables; frame geometry never moves */ #depot #mergeBoard::after{ transform:none!important; -webkit-transform:none!important; rotate:none!important; opacity:1!important; animation:none!important; -webkit-animation:none!important; background: linear-gradient(90deg,transparent 0 20%,#6ee7ff 30%,#fff 40%,#ff43d1 50%,transparent 62% 100%) var(--edge-x,0px) 0/180px 4px repeat-x, linear-gradient(180deg,transparent 0 20%,#ff43d1 30%,#fff 40%,#ffb13b 50%,transparent 62% 100%) 100% var(--edge-y,0px)/4px 180px repeat-y, linear-gradient(90deg,transparent 0 20%,#ffb13b 30%,#fff 40%,#765cff 50%,transparent 62% 100%) var(--edge-x-neg,0px) 100%/180px 4px repeat-x, linear-gradient(180deg,transparent 0 20%,#765cff 30%,#fff 40%,#6ee7ff 50%,transparent 62% 100%) 0 var(--edge-y-neg,0px)/4px 180px repeat-y!important; filter:drop-shadow(0 0 5px rgba(110,231,255,.8)) drop-shadow(0 0 8px rgba(255,67,209,.52))!important; } /* v351 — slow v350 frame animation exactly 2x */ #depot #mergeBoard::after{ animation-duration:2.7s!important; -webkit-animation-duration:2.7s!important; } /* v352 — another 20% slower than v351 */ #depot #mergeBoard::after{ animation-duration:3.375s!important; -webkit-animation-duration:3.375s!important; } /* v352 — slow current Depot frame animation another 2x */ #depot #mergeBoard::after{ animation-duration:5.4s!important; -webkit-animation-duration:5.4s!important; } /* v353 — force slow frame animation and refresh cached CSS */ #depot #mergeBoard::after{ animation:depotEdgeMotion350 5.4s linear infinite!important; -webkit-animation:depotEdgeMotion350 5.4s linear infinite!important; } /* v355 — one complete Depot frame animation cycle = 10 seconds */ #depot #mergeBoard::after{ animation:depotEdgeMotion350 10s linear infinite!important; -webkit-animation:depotEdgeMotion350 10s linear infinite!important; } /* v356 — one complete Depot frame animation cycle = 20 seconds */ #depot #mergeBoard::after{ animation:depotEdgeMotion350 20s linear infinite!important; -webkit-animation:depotEdgeMotion350 20s linear infinite!important; } /* v356 — 20s Depot frame cycle + Chrome-only Life nameplate clearance */ #depot #mergeBoard::after{ animation:depotEdgeMotion350 20s linear infinite!important; -webkit-animation:depotEdgeMotion350 20s linear infinite!important; } /* Chromium: keep cat name clear of FEED button; Safari keeps v308 layout */ @supports selector(:has(*)){ @supports not (-webkit-touch-callout:none){ #life #tap{transform:translateY(-15px)!important} #life .heroCard .cardInfo{bottom:2px!important} } } /* v357 — one complete Depot frame animation cycle = 60 seconds */ #depot #mergeBoard::after{ animation:depotEdgeMotion350 60s linear infinite!important; -webkit-animation:depotEdgeMotion350 60s linear infinite!important; } /* v358 — iOS Chrome Life nameplate clearance */ html.is-crios #life #tap{ transform:translateY(-30px)!important; } html.is-crios #life .heroCard .cardInfo{ bottom:8px!important; z-index:30!important; } html.is-crios #life .heroCard .cardInfo .heroCatName{ display:block!important; visibility:visible!important; opacity:1!important; position:relative!important; z-index:31!important; } /* v358 — Depot runner is JS-timed; disable competing CSS clock */ #depot #mergeBoard::after{ animation:none!important; -webkit-animation:none!important; } /* v359 — iOS Chrome: keep cat nameplate inside card below FEED button */ html.is-crios #life .heroCard{ overflow:hidden!important; } html.is-crios #life .heroCard .cardInfo{ position:absolute!important; left:42px!important; right:42px!important; top:auto!important; bottom:10px!important; height:24px!important; min-height:24px!important; margin:0!important; transform:none!important; z-index:40!important; display:flex!important; align-items:center!important; justify-content:center!important; } html.is-crios #life .heroCard .cardInfo .heroCatName{ position:static!important; transform:none!important; width:100%!important; height:24px!important; line-height:24px!important; margin:0!important; padding:0!important; display:block!important; text-align:center!important; visibility:visible!important; opacity:1!important; } html.is-crios #life #tap{ transform:translateY(-7px)!important; margin-bottom:54px!important; } /* v360 — Depot: one continuous runner around all four edges */ #depot #mergeBoard::after{ content:""!important; position:absolute!important; inset:-2px!important; border-radius:inherit!important; pointer-events:none!important; z-index:20!important; opacity:1!important; transform:none!important; -webkit-transform:none!important; background: linear-gradient(90deg,transparent 0 20%,#6ee7ff 30%,#fff 40%,#ff43d1 50%,transparent 62% 100%) var(--edge-x,0px) 0/180px 4px repeat-x, linear-gradient(180deg,transparent 0 20%,#765cff 30%,#fff 40%,#ffb13b 50%,transparent 62% 100%) 100% var(--edge-y,0px)/4px 180px repeat-y, linear-gradient(90deg,transparent 0 20%,#ffb13b 30%,#fff 40%,#765cff 50%,transparent 62% 100%) var(--edge-x-neg,0px) 100%/180px 4px repeat-x, linear-gradient(180deg,transparent 0 20%,#ff43d1 30%,#fff 40%,#6ee7ff 50%,transparent 62% 100%) 0 var(--edge-y-neg,0px)/4px 180px repeat-y!important; animation:none!important; -webkit-animation:none!important; } /* v361 — Depot perimeter runner: all 4 edges driven by one normalized phase */ #depot #mergeBoard::after{ background: linear-gradient(90deg,transparent 0 20%,#6ee7ff 30%,#fff 40%,#ff43d1 50%,transparent 62% 100%) var(--edge-phase,0px) 0/180px 4px repeat-x, linear-gradient(180deg,transparent 0 20%,#765cff 30%,#fff 40%,#ffb13b 50%,transparent 62% 100%) 100% var(--edge-phase,0px)/4px 180px repeat-y, linear-gradient(90deg,transparent 0 20%,#ffb13b 30%,#fff 40%,#765cff 50%,transparent 62% 100%) calc(0px - var(--edge-phase,0px)) 100%/180px 4px repeat-x, linear-gradient(180deg,transparent 0 20%,#ff43d1 30%,#fff 40%,#6ee7ff 50%,transparent 62% 100%) 0 calc(0px - var(--edge-phase,0px))/4px 180px repeat-y!important; animation:none!important; -webkit-animation:none!important; } /* v362 — rebuild Depot runner as four independent edge layers */ #depot #mergeBoard{position:relative!important} #depot #mergeBoard::after{display:none!important} #depot #mergeBoard .depotEdgeV362{ position:absolute!important;pointer-events:none!important;z-index:60!important; overflow:hidden!important; } #depot #mergeBoard .depotEdgeV362::after{ content:""!important;position:absolute!important; background:linear-gradient(90deg,transparent 0 15%,#6ee7ff 27%,#fff 38%,#ff43d1 50%,transparent 64% 100%)!important; } #depot #mergeBoard .depotEdgeV362.top, #depot #mergeBoard .depotEdgeV362.bottom{left:0!important;right:0!important;height:4px!important} #depot #mergeBoard .depotEdgeV362.top{top:0!important} #depot #mergeBoard .depotEdgeV362.bottom{bottom:0!important} #depot #mergeBoard .depotEdgeV362.top::after, #depot #mergeBoard .depotEdgeV362.bottom::after{ top:0!important;width:180px!important;height:4px!important; transform:translate3d(var(--runner-x,0px),0,0)!important; } #depot #mergeBoard .depotEdgeV362.bottom::after{ right:0!important;left:auto!important; transform:translate3d(calc(0px - var(--runner-x,0px)),0,0)!important; } #depot #mergeBoard .depotEdgeV362.left, #depot #mergeBoard .depotEdgeV362.right{top:0!important;bottom:0!important;width:4px!important} #depot #mergeBoard .depotEdgeV362.left{left:0!important} #depot #mergeBoard .depotEdgeV362.right{right:0!important} #depot #mergeBoard .depotEdgeV362.left::after, #depot #mergeBoard .depotEdgeV362.right::after{ left:0!important;width:180px!important;height:4px!important; transform-origin:0 0!important; transform:translate3d(0,var(--runner-y,0px),0) rotate(90deg)!important; } #depot #mergeBoard .depotEdgeV362.left::after{ bottom:0!important;top:auto!important; transform:translate3d(0,calc(0px - var(--runner-y,0px)),0) rotate(90deg)!important; } /* Depot animation rollback — exact v354 behavior only */ #depot #mergeBoard::after{ display:block!important; transform:none!important; -webkit-transform:none!important; rotate:none!important; opacity:1!important; background: linear-gradient(90deg,transparent 0 20%,#6ee7ff 30%,#fff 40%,#ff43d1 50%,transparent 62% 100%) var(--edge-x,0px) 0/180px 4px repeat-x, linear-gradient(180deg,transparent 0 20%,#ff43d1 30%,#fff 40%,#ffb13b 50%,transparent 62% 100%) 100% var(--edge-y,0px)/4px 180px repeat-y, linear-gradient(90deg,transparent 0 20%,#ffb13b 30%,#fff 40%,#765cff 50%,transparent 62% 100%) var(--edge-x-neg,0px) 100%/180px 4px repeat-x, linear-gradient(180deg,transparent 0 20%,#765cff 30%,#fff 40%,#6ee7ff 50%,transparent 62% 100%) 0 var(--edge-y-neg,0px)/4px 180px repeat-y!important; filter:drop-shadow(0 0 5px rgba(110,231,255,.8)) drop-shadow(0 0 8px rgba(255,67,209,.52))!important; animation:depotEdgeMotion350 5.4s linear infinite!important; -webkit-animation:depotEdgeMotion350 5.4s linear infinite!important; } #depot #mergeBoard .depotEdgeV362{display:none!important} /* v358 — Depot animation restored exactly to v350 timing/behavior */ #depot #mergeBoard::after{ animation:depotEdgeMotion350 1.35s linear infinite!important; -webkit-animation:depotEdgeMotion350 1.35s linear infinite!important; } /* Depot v354 animation — 30s per complete cycle */ #depot #mergeBoard::after{ animation:depotEdgeMotion350 30s linear infinite!important; -webkit-animation:depotEdgeMotion350 30s linear infinite!important; } /* v363 — Chrome iOS only: stable 4-edge Depot animation; Safari keeps v354 untouched */ html.is-crios #depot #mergeBoard::after{ animation:none!important; -webkit-animation:none!important; background: linear-gradient(90deg,transparent 0 20%,#6ee7ff 30%,#fff 40%,#ff43d1 50%,transparent 62% 100%) var(--cr-edge-x,0px) 0/180px 4px repeat-x, linear-gradient(180deg,transparent 0 20%,#ff43d1 30%,#fff 40%,#ffb13b 50%,transparent 62% 100%) 100% var(--cr-edge-y,0px)/4px 180px repeat-y, linear-gradient(90deg,transparent 0 20%,#ffb13b 30%,#fff 40%,#765cff 50%,transparent 62% 100%) calc(0px - var(--cr-edge-x,0px)) 100%/180px 4px repeat-x, linear-gradient(180deg,transparent 0 20%,#765cff 30%,#fff 40%,#6ee7ff 50%,transparent 62% 100%) 0 calc(0px - var(--cr-edge-y,0px))/4px 180px repeat-y!important; } /* v364 — Depot animation 3x slower: 90s full cycle */ #depot #mergeBoard::after{ animation-duration:90s!important; -webkit-animation-duration:90s!important; } html.is-crios #depot #mergeBoard::after{ animation:none!important; -webkit-animation:none!important; } /* v365 — definitive timing: JS owns Depot speed in every iOS browser */ #depot #mergeBoard::after{ animation:none!important; -webkit-animation:none!important; } /* v366 — restore proven v354 renderer; speed is controlled by JS variables only */ #depot #mergeBoard::after{ display:block!important; animation:none!important; -webkit-animation:none!important; background: linear-gradient(90deg,transparent 0 20%,#6ee7ff 30%,#fff 40%,#ff43d1 50%,transparent 62% 100%) var(--edge-x,0px) 0/180px 4px repeat-x, linear-gradient(180deg,transparent 0 20%,#ff43d1 30%,#fff 40%,#ffb13b 50%,transparent 62% 100%) 100% var(--edge-y,0px)/4px 180px repeat-y, linear-gradient(90deg,transparent 0 20%,#ffb13b 30%,#fff 40%,#765cff 50%,transparent 62% 100%) var(--edge-x-neg,0px) 100%/180px 4px repeat-x, linear-gradient(180deg,transparent 0 20%,#765cff 30%,#fff 40%,#6ee7ff 50%,transparent 62% 100%) 0 var(--edge-y-neg,0px)/4px 180px repeat-y!important; } html.is-crios #depot #mergeBoard::after{ background: linear-gradient(90deg,transparent 0 20%,#6ee7ff 30%,#fff 40%,#ff43d1 50%,transparent 62% 100%) var(--edge-x,0px) 0/180px 4px repeat-x, linear-gradient(180deg,transparent 0 20%,#ff43d1 30%,#fff 40%,#ffb13b 50%,transparent 62% 100%) 100% var(--edge-y,0px)/4px 180px repeat-y, linear-gradient(90deg,transparent 0 20%,#ffb13b 30%,#fff 40%,#765cff 50%,transparent 62% 100%) var(--edge-x-neg,0px) 100%/180px 4px repeat-x, linear-gradient(180deg,transparent 0 20%,#765cff 30%,#fff 40%,#6ee7ff 50%,transparent 62% 100%) 0 var(--edge-y-neg,0px)/4px 180px repeat-y!important; } /* v368 — economy bar: Depot LV10 coin + LV12 diamond */ .money.economy4 .currencyValue{ display:flex!important; align-items:center!important; justify-content:center!important; gap:4px!important; white-space:nowrap!important; } .money.economy4 .economyIcon{ width:21px!important; height:21px!important; object-fit:contain!important; flex:0 0 21px!important; display:block!important; } .money.economy4 .economyDiamondIcon{ width:22px!important; height:22px!important; flex-basis:22px!important; } .money.economy4 .currencyValue i{ font-style:normal!important; } /* v369 — uploaded bottom-menu icons, fixed 5-section layout */ nav.mainNavV369{ display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; align-items:center!important; } nav.mainNavV369 button{ min-width:0!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:3px!important; } nav.mainNavV369 button > img{ position:static!important; inset:auto!important; display:block!important; width:34px!important; height:34px!important; min-width:34px!important; min-height:34px!important; max-width:34px!important; max-height:34px!important; object-fit:contain!important; margin:0 auto!important; padding:0!important; transform:none!important; filter:none!important; } nav.mainNavV369 button > span{ display:block!important; width:100%!important; text-align:center!important; } /* v369 — Chrome: currency images must never escape the economy cells */ .money.economy4 .currencyValue > img.economyIcon{ position:static!important; inset:auto!important; width:21px!important; height:21px!important; min-width:21px!important; min-height:21px!important; max-width:21px!important; max-height:21px!important; object-fit:contain!important; margin:0!important; transform:none!important; } .money.economy4 .currencyValue > img.economyDiamondIcon{ width:22px!important; height:22px!important; min-width:22px!important; min-height:22px!important; max-width:22px!important; max-height:22px!important; } /* v370 — hard restore bottom nav visibility in Chrome/iOS */ #app > nav.mainNavV369{ position:fixed!important; left:50%!important; right:auto!important; bottom:0!important; top:auto!important; transform:translateX(-50%)!important; width:min(520px,100%)!important; height:82px!important; min-height:82px!important; display:grid!important; grid-template-columns:repeat(5,1fr)!important; visibility:visible!important; opacity:1!important; overflow:visible!important; z-index:2147483000!important; background:rgba(10,13,23,.97)!important; border:1px solid #272c40!important; border-bottom:0!important; border-radius:24px 24px 0 0!important; } #app > nav.mainNavV369 button{ display:flex!important; visibility:visible!important; opacity:1!important; height:100%!important; min-width:0!important; padding:6px 2px 5px!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; color:#7f879d!important; background:transparent!important; border:0!important; } #app > nav.mainNavV369 button.on{color:#f4bf4d!important} #app > nav.mainNavV369 button img{ display:block!important; visibility:visible!important; opacity:1!important; position:relative!important; z-index:1!important; width:38px!important; height:38px!important; min-width:38px!important; min-height:38px!important; max-width:38px!important; max-height:38px!important; object-fit:contain!important; } #app > nav.mainNavV369 button span{ display:block!important; visibility:visible!important; opacity:1!important; position:relative!important; z-index:2!important; margin-top:2px!important; font-size:8px!important; line-height:10px!important; } /* v370 — protect compact currency icons from legacy global img rules */ #app > .money.economy4 .currencyValue{ position:relative!important; height:24px!important; overflow:visible!important; } #app > .money.economy4 .currencyValue img.economyIcon{ position:relative!important; left:auto!important;right:auto!important;top:auto!important;bottom:auto!important; display:inline-block!important; width:21px!important;height:21px!important; min-width:21px!important;min-height:21px!important; max-width:21px!important;max-height:21px!important; object-fit:contain!important; transform:none!important; } /* v373 — straighten level/progress block above the card */ #life .cardProgress{ box-sizing:border-box!important; display:flex!important; flex-direction:column!important; justify-content:center!important; height:58px!important; min-height:58px!important; padding:9px 14px!important; margin:0 0 9px!important; } #life .cardProgress>div:first-child{ width:100%!important; display:flex!important; align-items:center!important; justify-content:space-between!important; line-height:16px!important; } #life .cardProgress>div:first-child b, #life .cardProgress>div:first-child span{ margin:0!important; line-height:16px!important; } #life .cardProgress .cardBar{ width:100%!important; height:7px!important; margin:6px 0 0!important; flex:0 0 7px!important; } /* v374 — uploaded header wallet/energy icons */ .energyBattery>span{display:flex!important;align-items:center!important;justify-content:center!important} .energyBattery .headerEnergyIcon{display:block!important;width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;max-width:24px!important;max-height:24px!important;object-fit:contain!important;position:static!important;transform:none!important} header #wallet{display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important} header #wallet .headerWalletIcon{display:block!important;width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;max-width:22px!important;max-height:22px!important;object-fit:contain!important;position:static!important;transform:none!important} /* v376 — larger annual income icon */ #app > .money.economy4 .currencyValue img.economyIncomeIcon{ width:30px!important;height:30px!important; min-width:30px!important;min-height:30px!important; max-width:30px!important;max-height:30px!important; flex:0 0 30px!important; object-fit:contain!important; } /* v379 — quick card switcher under Life card */ #life .cardQuickSwitch{width:min(520px,calc(100% - 28px));height:58px;margin:-2px auto 8px;display:flex;align-items:center;justify-content:center;gap:9px;padding:0 12px;box-sizing:border-box;position:relative;z-index:35;overflow-x:auto;scrollbar-width:none} #life .cardQuickSwitch::-webkit-scrollbar{display:none} #life .cardQuickSwitch button{border:0;background:transparent;padding:0;flex:0 0 auto;display:grid;place-items:center;-webkit-tap-highlight-color:transparent} #life .cardQuickSwitch .quickCollection{width:40px;height:40px;color:#777487;font-size:28px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))} #life .cardQuickSwitch>em{width:2px;height:28px;background:#625e72;border-radius:2px;flex:0 0 auto;margin:0 3px} #life .quickCatDot{width:34px;height:40px;position:relative} #life .quickCatDot i{display:block;width:23px;height:23px;border-radius:50%;background:#4e4b5d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)} #life .quickCatDot.active i{background:var(--rarity-color);box-shadow:0 0 0 3px rgba(255,255,255,.94),0 0 0 5px rgba(83,173,255,.65),0 0 12px rgba(83,173,255,.65)} #life .quickCatDot.active:after{content:"";position:absolute;width:11px;height:11px;border-radius:50%;background:#e83e50;right:1px;top:4px;box-shadow:0 0 0 2px #272635} #life .quickAddSlot{width:38px;height:40px;color:#716d80;font-size:35px;font-weight:300;line-height:1} @media(max-width:390px){#life .cardQuickSwitch{gap:6px;padding-inline:7px}.quickCatDot{width:29px!important}} /* v380 — compact quick switcher: collection | max 8 slots | plus */ #life .cardQuickSwitch{ width:min(520px,calc(100% - 24px))!important; height:52px!important; margin:-2px auto 8px!important; gap:5px!important; padding:0 6px!important; overflow:hidden!important; justify-content:center!important; } #life .cardQuickSwitch .quickCollection{width:32px!important;height:38px!important;flex:0 0 32px!important} #life .cardQuickSwitch>em{height:25px!important;margin:0 2px!important} #life .cardQuickSwitch .quickCatDot{width:30px!important;height:38px!important;flex:0 0 30px!important} #life .cardQuickSwitch .quickCatDot i{width:20px!important;height:20px!important} #life .cardQuickSwitch .quickAddSlot{width:32px!important;height:38px!important;flex:0 0 32px!important} /* v381 — force quick switcher into the exact visible strip between card and bottom nav */ #life{position:relative!important} #life .cardQuickSwitch{ display:flex!important; visibility:visible!important; opacity:1!important; position:absolute!important; left:50%!important; bottom:2px!important; transform:translateX(-50%)!important; z-index:2147482000!important; width:min(500px,calc(100% - 28px))!important; height:48px!important; margin:0!important; padding:0 4px!important; background:transparent!important; pointer-events:auto!important; align-items:center!important; justify-content:center!important; gap:5px!important; overflow:hidden!important; } #life .cardQuickSwitch button{display:grid!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important} #life .cardQuickSwitch .quickCollection{font-size:26px!important;color:#8a8798!important} #life .cardQuickSwitch .quickCatDot i{display:block!important} #life .cardQuickSwitch .quickAddSlot{font-size:34px!important;color:#8a8798!important} /* v382 — align quick switcher cleanly below card content */ #life .cardQuickSwitch{ bottom:0!important; height:44px!important; width:min(470px,calc(100% - 72px))!important; gap:7px!important; padding:0 6px!important; align-items:center!important; justify-content:center!important; } #life .cardQuickSwitch .quickCollection, #life .cardQuickSwitch .quickAddSlot, #life .cardQuickSwitch .quickCatDot{ height:36px!important; align-self:center!important; } #life .cardQuickSwitch .quickCollection{width:30px!important;flex-basis:30px!important;font-size:25px!important} #life .cardQuickSwitch>em{height:25px!important;margin:0 3px!important;align-self:center!important} #life .cardQuickSwitch .quickCatDot{width:28px!important;flex-basis:28px!important} #life .cardQuickSwitch .quickCatDot i{width:20px!important;height:20px!important;margin:auto!important} #life .cardQuickSwitch .quickCatDot.active:after{right:0!important;top:3px!important} #life .cardQuickSwitch .quickAddSlot{width:30px!important;flex-basis:30px!important;font-size:32px!important} /* v383 — switcher below the card, never over the cat's name */ #life{overflow:visible!important} #life .cardQuickSwitch{ bottom:-48px!important; height:40px!important; z-index:45!important; } /* v384 — keep switcher visible below the name, inside Life viewport */ #life{overflow:hidden!important} #life .cardQuickSwitch{ bottom:2px!important; height:34px!important; transform:translateX(-50%)!important; z-index:2147482000!important; } #life .stage{ margin-bottom:40px!important; } /* v385 — lower quick switcher by ~15% of its height */ #life .cardQuickSwitch{bottom:-3px!important} /* v386 — compact Life vertical rhythm */ #life .cardProgress{ height:48px!important; min-height:48px!important; padding:6px 12px!important; margin:0 0 6px!important; border-radius:20px!important; } #life .cardProgress>div:first-child{line-height:14px!important} #life .cardProgress>div:first-child b, #life .cardProgress>div:first-child span{line-height:14px!important} #life .cardProgress .cardBar{ height:6px!important; flex-basis:6px!important; margin-top:5px!important; } #life .stage{ margin-bottom:34px!important; transform:translateY(-2px)!important; } #life .cardQuickSwitch{ bottom:-2px!important; } /* v387 — every occupied slot shows its card rarity; first slot carries a paw */ #life .cardQuickSwitch .quickCatDot i{ position:relative!important; background:var(--rarity-color)!important; box-shadow:0 0 7px color-mix(in srgb,var(--rarity-color) 72%,transparent),inset 0 0 0 1px rgba(255,255,255,.28)!important; } #life .cardQuickSwitch .quickCatDot.active i{ box-shadow:0 0 0 3px rgba(255,255,255,.94),0 0 0 5px var(--rarity-color),0 0 14px var(--rarity-color)!important; } #life .cardQuickSwitch .slotPaw{ position:absolute!important;inset:0!important; display:grid!important;place-items:center!important; font-size:12px!important;line-height:20px!important; filter:grayscale(1) brightness(.35)!important; } /* v388 — paw shortcut + two translucent upcoming slots + slot counter */ #life .cardQuickSwitch{padding-right:34px!important;overflow:visible!important} #life .cardQuickSwitch .quickCollection .catPawIcon{ display:block!important;font-size:22px!important;line-height:1!important; filter:grayscale(1) brightness(1.45)!important;opacity:.9!important; } #life .cardQuickSwitch .quickLocked{opacity:.28!important} #life .cardQuickSwitch .quickLocked i{ background:#8d899b!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)!important; } #life .cardQuickSwitch .quickSlotCount{ position:absolute!important;right:2px!important;top:50%!important;transform:translateY(-50%)!important; color:#777487!important;font-size:9px!important;font-weight:900!important;letter-spacing:.5px!important; } /* v389 — brighter paw; locked previews keep upcoming rarity color */ #life .cardQuickSwitch{padding-right:6px!important} #life .cardQuickSwitch .quickCollection .catPawIcon{ font-size:25px!important; filter:grayscale(1) brightness(2.6) contrast(1.15) drop-shadow(0 0 5px rgba(255,255,255,.5))!important; opacity:1!important; } #life .cardQuickSwitch .quickLocked{opacity:.38!important} #life .cardQuickSwitch .quickLocked i{ background:var(--rarity-color)!important; box-shadow:0 0 7px color-mix(in srgb,var(--rarity-color) 45%,transparent),inset 0 0 0 1px rgba(255,255,255,.22)!important; } #life .cardQuickSwitch .quickSlotCount{display:none!important} /* v390 — CAT HOME prototype */ #cats.roomPage{padding:8px 0 92px!important;overflow-y:auto!important} .roomViewport{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none} .roomViewport::-webkit-scrollbar{display:none} .roomCanvas{position:relative;width:760px;height:500px;overflow:hidden;background:#d8c0a7} .roomWall{position:absolute;inset:0 0 34% 0;box-shadow:inset 0 -3px 0 rgba(255,255,255,.35)} .roomWall:after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:#e9ded1;box-shadow:0 -2px 5px rgba(0,0,0,.18)} .roomFloor{position:absolute;left:0;right:0;bottom:0;height:34%;transform-origin:50% 0;box-shadow:inset 0 12px 25px rgba(0,0,0,.18)} .roomCat{position:absolute;left:330px;top:285px;width:94px;height:110px;display:grid;place-items:center;font-size:86px;line-height:1;z-index:5;touch-action:none;cursor:grab;filter:drop-shadow(0 10px 8px rgba(0,0,0,.35));user-select:none} .roomEditor{margin:8px 10px 0;padding:10px;background:rgba(7,12,25,.94);border:1px solid #29334b;border-radius:18px} .roomTabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:10px} .roomTabs button{height:36px;border:1px solid #303b55;border-radius:10px;background:#10182a;color:#aeb8ce;font-size:10px;font-weight:900} .roomTabs button.on{border-color:#f0bd53;color:#ffd66e;box-shadow:0 0 10px rgba(240,189,83,.25)} .roomChoices{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none} .roomChoices::-webkit-scrollbar{display:none} .roomSwatch{flex:0 0 70px;border:0;background:transparent;color:#929bb0;padding:0;font-size:8px;font-weight:800} .roomSwatch i{display:block;width:64px;height:58px;border:2px solid #303a52;border-radius:10px;margin:auto auto 5px} .roomSwatch.on i{border-color:#ffd36b;box-shadow:0 0 10px rgba(255,211,107,.35)} .roomSoon{width:100%;padding:18px 10px;text-align:center;color:#929bb0;font-size:11px} #collection.page{padding-bottom:100px} /* v391 — room becomes a game scene, editor stays hidden until requested */ #cats.roomPage{position:relative!important;padding:6px 0 88px!important;overflow:hidden!important} .roomViewport{ width:100%!important;height:calc(100dvh - 330px)!important;min-height:470px!important;max-height:620px!important; overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity; border-radius:0!important;box-shadow:inset 0 0 55px rgba(0,0,0,.42); } .roomCanvas{width:980px!important;height:100%!important;min-height:470px!important;background:#d5bda5!important} .roomWall{ inset:0 0 31% 0!important; background-color:#d5bda5; background-image:linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(180deg,rgba(255,255,255,.13),rgba(0,0,0,.07))!important; background-size:84px 100%,100% 100%!important; box-shadow:inset 0 18px 35px rgba(255,255,255,.08),inset 0 -28px 35px rgba(0,0,0,.08)!important; } .roomWall:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,transparent 35%,rgba(0,0,0,.14) 100%)} .roomWall:after{ height:15px!important;background:linear-gradient(#f4eee7,#c8b9aa)!important; border-top:1px solid rgba(255,255,255,.8)!important;border-bottom:2px solid rgba(72,48,34,.25)!important; box-shadow:0 6px 10px rgba(0,0,0,.18)!important } .roomFloor{ height:31%!important; background-color:#75472f; background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,transparent 2px 112px),linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.22))!important; box-shadow:inset 0 25px 38px rgba(0,0,0,.18)!important; } .roomFloor:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,.08),transparent 32%,rgba(0,0,0,.12))} .roomCat{top:auto!important;bottom:18%!important;font-size:96px!important} .roomEditBtn{ position:absolute!important;right:14px!important;bottom:102px!important;z-index:80!important; height:38px!important;padding:0 14px!important;border-radius:14px!important; border:1px solid #d7aa52!important;background:rgba(8,13,25,.9)!important;color:#ffd36c!important; font-size:10px!important;font-weight:900!important;letter-spacing:1px!important;box-shadow:0 6px 20px rgba(0,0,0,.35)!important } .roomEditor{ position:absolute!important;left:8px!important;right:8px!important;bottom:90px!important;z-index:100!important; margin:0!important;transform:translateY(calc(100% + 110px))!important;opacity:0!important;pointer-events:none!important; transition:transform .28s ease,opacity .2s ease!important; background:rgba(7,12,25,.98)!important;box-shadow:0 -15px 40px rgba(0,0,0,.45)!important } .roomEditor.open{transform:translateY(0)!important;opacity:1!important;pointer-events:auto!important} .roomEditorHead{display:flex;align-items:center;justify-content:space-between;margin:0 2px 9px;color:#d7deee;font-size:11px;letter-spacing:1.5px} .roomEditorHead button{width:30px;height:30px;border:0;border-radius:9px;background:#161e31;color:#fff;font-size:22px;line-height:26px} /* v392 — persistent drag/drop room objects */ .roomObject{position:absolute;display:grid;place-items:center;touch-action:none;user-select:none;cursor:grab;filter:drop-shadow(0 12px 9px rgba(0,0,0,.32));transform-origin:50% 100%} .roomObject.dragging,.roomCat.dragging{cursor:grabbing;filter:drop-shadow(0 18px 12px rgba(0,0,0,.42));transform:scale(1.035)} .roomObject>span{font-size:62px;line-height:1;pointer-events:none} .roomObject-rug{border-radius:50%;background:radial-gradient(ellipse,#c8a66e 0 45%,#76513d 47% 54%,#33251f 56% 100%);transform:perspective(160px) rotateX(54deg);filter:drop-shadow(0 8px 5px rgba(0,0,0,.3))} .roomObject-rug>span{display:none} .roomObject-chair>span{font-size:82px} .roomObject-table{border-radius:10px;background:linear-gradient(#a56d3e 0 18%,#6f4329 19% 28%,transparent 29%);border-left:12px solid transparent;border-right:12px solid transparent} .roomObject-table:before,.roomObject-table:after{content:"";position:absolute;top:24px;bottom:0;width:9px;background:#5c3624}.roomObject-table:before{left:17px}.roomObject-table:after{right:17px}.roomObject-table>span{display:none} .roomObject-cabinet{border-radius:8px;background:linear-gradient(90deg,#583723 0 49%,#3b251a 50% 51%,#68442b 52%);border:4px solid #352116;box-shadow:inset 0 0 0 2px rgba(255,255,255,.08)} .roomObject-cabinet:before,.roomObject-cabinet:after{content:"";position:absolute;top:48%;width:6px;height:6px;border-radius:50%;background:#d5ad58}.roomObject-cabinet:before{left:43%}.roomObject-cabinet:after{right:43%}.roomObject-cabinet>span{display:none} .roomObjectRemove{position:absolute;right:-7px;top:-7px;width:25px;height:25px;border:1px solid #58647d;border-radius:50%;background:#11192a;color:#fff;font-size:16px;display:none} .roomEditor.open~* .roomObjectRemove,.roomObject:hover .roomObjectRemove{display:block} .roomItemChoice{flex:0 0 78px;height:88px;border:1px solid #303b55;border-radius:12px;background:#10182a;color:#c7d0e3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px} .roomItemChoice i{font-style:normal;font-size:34px;line-height:35px}.roomItemChoice span{font-size:9px;font-weight:900}.roomItemChoice small{font-size:7px;color:#e8b957} /* v393 — taller wall, 30% shallower floor, no Safari drag trail */ .roomWall{inset:0 0 21.7% 0!important} .roomFloor{height:21.7%!important} .roomCat,.roomObject{ -webkit-user-drag:none!important; -webkit-touch-callout:none!important; -webkit-tap-highlight-color:transparent!important; touch-action:none!important; } .roomCat.dragging,.roomObject.dragging{ transition:none!important; animation:none!important; will-change:left,top!important; transform:none!important; filter:none!important; box-shadow:none!important; } .roomObject{backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important} /* v394 — landscape-like room geometry inside portrait game */ #cats.roomPage{padding-top:4px!important} .roomViewport{ height:calc(100dvh - 335px)!important; min-height:430px!important; max-height:560px!important; background:#080b13!important; } .roomCanvas{ width:1120px!important; min-height:430px!important; height:100%!important; } /* reference geometry: broad back wall + visible side walls */ .roomWall{ left:0!important;right:0!important;top:0!important;bottom:24%!important; clip-path:polygon(9% 0,91% 0,91% 78%,100% 100%,0 100%,9% 78%)!important; } .roomWall:before{ background: linear-gradient(78deg,rgba(0,0,0,.28) 0 9%,transparent 9.2% 90.8%,rgba(0,0,0,.28) 91% 100%), radial-gradient(ellipse at 50% 35%,rgba(255,255,255,.08),transparent 52%,rgba(0,0,0,.12) 100%)!important; } .roomWall:after{left:9%!important;right:9%!important;bottom:0!important} .roomFloor{ left:0!important;right:0!important;bottom:0!important;height:24%!important; clip-path:polygon(9% 0,91% 0,100% 100%,0 100%)!important; transform:none!important; } .roomCat{width:88px!important;height:102px!important;font-size:82px!important} /* v395 — furniture mirror control */ .roomObject>span,.roomObject:before,.roomObject:after{transform:scaleX(var(--room-flip,1))} .roomObject-chair>span{transform:scaleX(var(--room-flip,1))!important} .roomObjectTools{position:absolute;right:-8px;top:-9px;display:flex;gap:4px;z-index:20;transform:none!important} .roomObjectTools button{width:27px;height:27px;border:1px solid #58647d;border-radius:50%;background:#11192a;color:#fff;font-size:16px;line-height:24px;padding:0;box-shadow:0 3px 8px rgba(0,0,0,.3)} .roomObjectFlip{color:#ffd36b!important} .roomObjectRemove{position:static!important;display:block!important} /* v396 — fix exposed room edges while horizontally scrolling */ .roomCanvas{background:#241631!important} .roomWall{ clip-path:none!important; left:0!important;right:0!important; overflow:hidden!important; } .roomWall:before{ background: linear-gradient(78deg,rgba(0,0,0,.30) 0 8.8%,transparent 9.1% 90.9%,rgba(0,0,0,.30) 91.2% 100%), radial-gradient(ellipse at 50% 35%,rgba(255,255,255,.08),transparent 52%,rgba(0,0,0,.12) 100%)!important; } .roomWall:after{left:0!important;right:0!important} .roomFloor{ clip-path:none!important; left:0!important;right:0!important; overflow:hidden!important; } .roomFloor:before{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(78deg,rgba(0,0,0,.22) 0 8.8%,transparent 9.1% 90.9%,rgba(0,0,0,.22) 91.2% 100%); } /* v397 — wider room scene + dedicated room menu below it */ #cats.roomPage{ margin-left:-20px!important; margin-right:-20px!important; width:calc(100% + 40px)!important; padding:2px 0 164px!important; } .roomViewport{ width:100%!important; height:calc(100dvh - 300px)!important; min-height:455px!important; max-height:600px!important; } .roomCanvas{width:1240px!important} .roomEditBtn{display:none!important} .roomDock{ position:absolute!important;left:20px!important;right:20px!important;bottom:88px!important;z-index:85!important; height:66px!important;padding:6px 8px!important; display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:6px!important; background:rgba(7,11,21,.97)!important;border:1px solid #28334b!important;border-radius:20px 20px 0 0!important; box-shadow:0 -8px 28px rgba(0,0,0,.36)!important; } .roomDock button{ min-width:0!important;border:1px solid #263149!important;border-radius:12px!important; background:#10182a!important;color:#9fa9bf!important; display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important; font-size:22px!important;line-height:22px!important; } .roomDock button span{font-size:8px!important;line-height:10px!important;font-weight:900!important;letter-spacing:.45px!important} .roomDock button:active{border-color:#e8b957!important;color:#ffd36b!important} .roomEditor{ left:20px!important;right:20px!important;bottom:154px!important; border-radius:18px 18px 0 0!important; } /* v398 — selected-item controls + proper angled side walls */ .roomObjectTools{display:none!important} .roomObject.selected .roomObjectTools{display:flex!important} .roomObject:hover .roomObjectRemove{display:block!important} .roomObject:not(.selected):hover .roomObjectTools{display:none!important} /* side walls are overlays, never holes in the room */ .roomWall{clip-path:none!important} .roomWall:before{ content:""!important;position:absolute!important;inset:0!important;pointer-events:none!important;z-index:2!important; background: linear-gradient(78deg,rgba(13,8,18,.42) 0 9%,transparent 9.2% 90.8%,rgba(13,8,18,.42) 91% 100%), radial-gradient(ellipse at 50% 35%,rgba(255,255,255,.08),transparent 52%,rgba(0,0,0,.12) 100%)!important; } .roomWall:after{z-index:3!important;left:9%!important;right:9%!important} .roomFloor{clip-path:none!important} .roomFloor:before{ content:""!important;position:absolute!important;inset:0!important;pointer-events:none!important;z-index:1!important; background: linear-gradient(78deg,rgba(32,19,15,.32) 0 9%,transparent 9.2% 90.8%,rgba(32,19,15,.32) 91% 100%)!important; } /* angled inner seams from wall to floor */ .roomCanvas:before,.roomCanvas:after{ content:"";position:absolute;top:0;bottom:24%;width:10%;z-index:2;pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,.055),rgba(0,0,0,.20)); } .roomCanvas:before{left:0;clip-path:polygon(0 0,100% 0,100% 78%,0 100%)} .roomCanvas:after{right:0;transform:scaleX(-1);clip-path:polygon(0 0,100% 0,100% 78%,0 100%)} /* v399 — reference-style room geometry: real side walls converging into back wall */ .roomCanvas{background:#241631!important;isolation:isolate!important} .roomWall{ left:16%!important;right:16%!important;top:0!important;bottom:24%!important; overflow:visible!important;clip-path:none!important;z-index:1!important; } .roomWall:before{ content:""!important;position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important; background:radial-gradient(ellipse at 50% 35%,rgba(255,255,255,.08),transparent 55%,rgba(0,0,0,.11) 100%)!important; } .roomWall:after{ content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:-1px!important;height:15px!important;z-index:5!important; background:linear-gradient(#f4eee7,#c8b9aa)!important;border-top:1px solid rgba(255,255,255,.8)!important;border-bottom:2px solid rgba(72,48,34,.25)!important; box-shadow:0 6px 10px rgba(0,0,0,.18)!important } .roomFloor{ left:0!important;right:0!important;bottom:0!important;height:24%!important;z-index:1!important; clip-path:polygon(16% 0,84% 0,100% 100%,0 100%)!important;overflow:hidden!important; } .roomFloor:before{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.13))!important} /* side walls: wide at screen edge, narrow at back-wall seam */ .roomCanvas:before,.roomCanvas:after{ content:""!important;position:absolute!important;top:0!important;bottom:24%!important;width:16.2%!important;z-index:2!important;pointer-events:none!important; background: linear-gradient(90deg,rgba(0,0,0,.20),rgba(255,255,255,.035)), linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.08))!important; } .roomCanvas:before{ left:0!important; clip-path:polygon(0 0,100% 0,100% 100%,0 86%)!important; border-right:1px solid rgba(0,0,0,.22)!important; } .roomCanvas:after{ right:0!important;transform:none!important; clip-path:polygon(0 0,100% 0,100% 86%,0 100%)!important; border-left:1px solid rgba(0,0,0,.22)!important; } /* v400 — level 1 room assembled from uploaded art assets */ #cats.roomPage{ position:relative!important; display:flex!important;flex-direction:column!important; margin-left:-20px!important;margin-right:-20px!important;width:calc(100% + 40px)!important; padding:0 0 92px!important; } .roomViewport{ position:relative!important;width:100%!important; height:calc(100dvh - 390px)!important;min-height:470px!important;max-height:620px!important; overflow-x:auto!important;overflow-y:hidden!important; } .roomCanvas{ position:relative!important;width:1280px!important;height:100%!important;min-height:470px!important; overflow:hidden!important;background:#17100d!important;isolation:isolate!important; --wall:url('assets/C08CFAD5-4042-4CA6-A446-469B0D29A191.png'); --floor:url('assets/1630BEFC-0822-4D53-8417-41E6C509E888.png'); --top:url('assets/7D6EC1D1-6BC2-4276-944D-AE3460E5DC14.png'); --base:url('assets/38D3B228-1CF0-494F-AE6B-A169CC6777A0.png'); } /* back wall */ .roomWall{ position:absolute!important;left:15%!important;right:15%!important;top:9%!important;bottom:27%!important; background-image:var(--wall)!important;background-size:cover!important;background-position:center!important; clip-path:none!important;z-index:2!important; } /* side walls use the exact same wallpaper, perspective-mapped */ .roomSideWall{position:absolute;top:9%;bottom:27%;width:15.2%;z-index:3;background-image:var(--wall);background-size:auto 100%;background-repeat:repeat;filter:brightness(.78)} .roomSideWallLeft{left:0;transform-origin:right center;clip-path:polygon(0 0,100% 7%,100% 93%,0 100%);background-position:left center} .roomSideWallRight{right:0;transform-origin:left center;clip-path:polygon(0 7%,100% 0,100% 100%,0 93%);background-position:right center} /* ceiling panel is a real uploaded PNG */ .roomCeilingAsset{ position:absolute;left:9%;right:9%;top:-7%;height:19%;z-index:5;pointer-events:none; background:url('assets/B838C93C-1852-4666-8ECB-57FC6BE2420D.png') center top/100% 100% no-repeat; } /* rear cornices */ .roomTopPlinth{position:absolute;left:14.5%;right:14.5%;top:7.1%;height:6.5%;z-index:7;background:var(--top) center/100% 100% no-repeat;pointer-events:none} .roomBasePlinth{position:absolute;left:14.5%;right:14.5%;bottom:24.3%;height:5.8%;z-index:8;background:var(--base) center/100% 100% no-repeat;pointer-events:none} /* side baseboards: same uploaded baseboard, perspective to the front corners */ .roomSidePlinth{position:absolute;bottom:21.5%;width:17%;height:8%;z-index:9;background:var(--base) center/100% 100% no-repeat;pointer-events:none} .roomSidePlinthLeft{left:0;transform:skewY(12deg);transform-origin:right bottom} .roomSidePlinthRight{right:0;transform:skewY(-12deg);transform-origin:left bottom} /* floor asset */ .roomFloor{ position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:27%!important;z-index:4!important; background-image:var(--floor)!important;background-size:100% 100%!important;background-position:center bottom!important;background-repeat:no-repeat!important; clip-path:polygon(15% 0,85% 0,100% 100%,0 100%)!important; } /* disable old pseudo geometry now that real art layers exist */ .roomCanvas:before,.roomCanvas:after,.roomWall:before,.roomWall:after,.roomFloor:before{display:none!important} /* room controls live BELOW the playfield, never over furniture */ .roomDock{ position:relative!important;left:auto!important;right:auto!important;bottom:auto!important; order:2!important;width:calc(100% - 24px)!important;height:64px!important;margin:8px 12px 0!important; flex:0 0 64px!important;z-index:85!important;border-radius:18px!important; } .roomEditor{position:fixed!important;left:12px!important;right:12px!important;bottom:154px!important;z-index:2147482500!important} .roomCat,.roomObject{z-index:20!important} /* v401 — hard room shell geometry, no gaps */ .roomCanvas{ --room-back-l:220px;--room-back-r:1060px;--room-ceil-y:58px;--room-floor-y:365px; background:#2a201a!important; } .roomWall{ left:var(--room-back-l)!important;right:220px!important;top:var(--room-ceil-y)!important;bottom:auto!important;height:307px!important; background-image:var(--wall)!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important; clip-path:none!important;filter:none!important;z-index:2!important; } .roomSideWall{ top:0!important;bottom:auto!important;height:365px!important;width:220px!important; background-image:var(--wall)!important;background-size:560px 365px!important;background-repeat:no-repeat!important; filter:brightness(.72)!important;z-index:3!important; } .roomSideWallLeft{ left:0!important;right:auto!important; clip-path:polygon(0 0,100% 16%,100% 100%,0 100%)!important; background-position:left center!important; } .roomSideWallRight{ right:0!important;left:auto!important; clip-path:polygon(0 16%,100% 0,100% 100%,0 100%)!important; background-position:right center!important; } /* ceiling is a closed trapezoid touching every wall */ .roomCeilingAsset{ display:block!important;left:0!important;right:0!important;top:0!important;height:59px!important;z-index:6!important; background-image:url('assets/B838C93C-1852-4666-8ECB-57FC6BE2420D.png')!important; background-size:100% 100%!important;background-position:center!important;background-repeat:no-repeat!important; clip-path:polygon(0 0,100% 0,82.8% 100%,17.2% 100%)!important; } /* floor starts exactly where walls finish */ .roomFloor{ left:0!important;right:0!important;top:365px!important;bottom:0!important;height:auto!important; background-image:var(--floor)!important;background-size:100% 100%!important;background-position:center!important;background-repeat:no-repeat!important; clip-path:polygon(17.2% 0,82.8% 0,100% 100%,0 100%)!important;z-index:4!important; } /* straight back cornices */ .roomTopPlinth{ left:218px!important;right:218px!important;top:52px!important;height:18px!important;z-index:10!important; background:var(--top) center/100% 100% no-repeat!important; } .roomBasePlinth{ left:218px!important;right:218px!important;top:350px!important;bottom:auto!important;height:25px!important;z-index:11!important; background:var(--base) center/100% 100% no-repeat!important; } /* side floor plinths meet the rear plinth exactly */ .roomSidePlinth{ top:350px!important;bottom:auto!important;width:224px!important;height:26px!important;z-index:12!important; background:var(--base) center/100% 100% no-repeat!important; } .roomSidePlinthLeft{left:0!important;transform:skewY(4deg)!important;transform-origin:right bottom!important} .roomSidePlinthRight{right:0!important;transform:skewY(-4deg)!important;transform-origin:left bottom!important} /* remove any legacy overlays/shadows that can cover wallpaper */ .roomCanvas:before,.roomCanvas:after,.roomWall:before,.roomWall:after,.roomFloor:before, .roomSideWall:before,.roomSideWall:after{content:none!important;display:none!important} /* editor remains outside the scene */ .roomDock{position:relative!important;transform:none!important;inset:auto!important;margin:8px 12px 0!important} /* v402 — tighter perspective + undistorted ceiling */ .roomCanvas{ --room-back-l:165px!important; --room-back-r:1115px!important; --room-ceil-y:72px!important; --room-floor-y:365px!important; } /* wider back wall, narrower side walls */ .roomWall{ left:165px!important;right:165px!important;top:72px!important; height:293px!important;bottom:auto!important; background-size:cover!important;background-position:center!important; } .roomSideWall{ top:0!important;width:165px!important;height:365px!important; background-size:520px 365px!important; } .roomSideWallLeft{clip-path:polygon(0 0,100% 19.7%,100% 100%,0 100%)!important} .roomSideWallRight{clip-path:polygon(0 19.7%,100% 0,100% 100%,0 100%)!important} /* ceiling keeps its artwork proportions: contain instead of forced 100% x 100% */ .roomCeilingAsset{ left:0!important;right:0!important;top:0!important;height:73px!important; background-size:contain!important;background-position:center top!important;background-repeat:no-repeat!important; clip-path:polygon(0 0,100% 0,87.1% 100%,12.9% 100%)!important; } /* seal tiny gaps behind the transparent ceiling PNG */ .roomCanvas{background:linear-gradient(#776452 0 73px,#35251d 73px 365px,#5b4638 365px 100%)!important} /* floor shares exactly the same vanishing corners */ .roomFloor{ top:365px!important;height:auto!important;bottom:0!important; clip-path:polygon(12.9% 0,87.1% 0,100% 100%,0 100%)!important; } /* rear moldings follow the new back-wall width */ .roomTopPlinth{ left:163px!important;right:163px!important;top:64px!important;height:18px!important; } .roomBasePlinth{ left:163px!important;right:163px!important;top:350px!important;height:25px!important; } /* side baseboards terminate exactly at rear-wall corners */ .roomSidePlinth{top:350px!important;width:167px!important;height:26px!important} .roomSidePlinthLeft{left:0!important;transform:skewY(5deg)!important;transform-origin:right bottom!important} .roomSidePlinthRight{right:0!important;transform:skewY(-5deg)!important;transform-origin:left bottom!important} /* no legacy masks */ .roomCanvas:before,.roomCanvas:after,.roomWall:before,.roomWall:after,.roomFloor:before{display:none!important;content:none!important} /* v403 — unified room background from approved perspective artwork */ .roomCanvas{ width:1280px!important; background:#261b22 url('assets/BD1E97B0-4D93-4C37-9C7E-7DFB1C84031C.png') center center/100% 100% no-repeat!important; overflow:hidden!important; } /* perspective, ceiling, walls, floor and trim are baked into the approved background */ .roomCeilingAsset,.roomWall,.roomSideWall,.roomTopPlinth,.roomBasePlinth,.roomSidePlinth,.roomFloor{ display:none!important; } /* furniture/cat remain interactive above the background */ .roomCat,.roomObject{z-index:20!important} /* allow objects to use the full floor area of the new background */ .roomObject{touch-action:none!important} .roomDock{ position:relative!important;inset:auto!important;transform:none!important; margin:8px 12px 0!important;z-index:85!important; } /* v404 — approved room background with narrower side walls and compact ceiling */ .roomCanvas{ background-image:url('assets/93E1BF3D-1402-4A1D-9441-7336801A78B8.png')!important; background-position:center center!important; background-size:100% 100%!important; background-repeat:no-repeat!important; } /* v405 — full room playfield + editor button inside scene */ #cats.roomPage{ display:block!important; margin-left:-20px!important;margin-right:-20px!important; width:calc(100% + 40px)!important; padding-bottom:0!important; overflow:hidden!important; } #cats .roomViewport{ width:100%!important; height:calc(100dvh - 300px)!important; min-height:570px!important; max-height:none!important; overflow-x:auto!important;overflow-y:hidden!important; margin:0!important;padding:0!important; } #cats .roomCanvas{ height:100%!important; min-height:570px!important; background-size:100% 100%!important; background-position:center!important; } #cats .roomDock{display:none!important} .roomEditorButton{ position:absolute!important; right:28px!important;bottom:28px!important; z-index:80!important; display:flex!important;align-items:center!important;gap:8px!important; height:48px!important;padding:0 18px!important; border:1px solid #424a69!important;border-radius:17px!important; background:linear-gradient(180deg,rgba(27,34,63,.97),rgba(10,15,32,.98))!important; box-shadow:0 8px 24px rgba(0,0,0,.38)!important; color:#fff!important;font-size:13px!important;font-weight:900!important; letter-spacing:.04em!important; } .roomEditorButton span{font-size:21px!important} #cats .roomEditor{ position:fixed!important;left:12px!important;right:12px!important; bottom:96px!important;z-index:2147482500!important; } /* Home owns the lower screen area; hide global nav only while Home is active */ body:has(#cats.active) #app > nav.mainNavV369, body:has(#cats.on) #app > nav.mainNavV369{display:none!important} /* v406 — editor follows visible viewport; room fills lower screen */ #cats.roomPage{height:calc(100dvh - 300px)!important;min-height:610px!important;position:relative!important} #cats .roomViewport{ position:relative!important; height:100%!important;min-height:610px!important;max-height:none!important; padding:0!important;margin:0!important; overflow-x:auto!important;overflow-y:hidden!important; } #cats .roomCanvas{height:100%!important;min-height:610px!important} #cats .roomEditorButton{ position:absolute!important; right:18px!important;bottom:18px!important; z-index:2147482000!important; } body:has(#cats.active) #app,body:has(#cats.on) #app{padding-bottom:0!important} body:has(#cats.active) main,body:has(#cats.on) main{padding-bottom:0!important;margin-bottom:0!important} /* v407 — iOS Safari: room must paint through the dynamic bottom viewport */ #cats.roomPage{ height:auto!important; min-height:0!important; position:fixed!important; left:0!important;right:0!important; top:370px!important; bottom:0!important; width:auto!important; margin:0!important; padding:0!important; overflow:hidden!important; } #cats .roomViewport{ position:absolute!important; inset:0!important; width:100%!important;height:auto!important; min-height:0!important;max-height:none!important; overflow-x:auto!important;overflow-y:hidden!important; -webkit-overflow-scrolling:touch!important; } #cats .roomCanvas{ height:100%!important; min-height:100%!important; background-size:100% 100%!important; background-position:center center!important; } #cats .roomEditorButton{ position:fixed!important; right:max(18px,env(safe-area-inset-right))!important; bottom:max(18px,env(safe-area-inset-bottom))!important; z-index:2147482000!important; } @supports(height:100svh){ #cats.roomPage{bottom:0!important} } /* v408 — editor fixed at top-right of visible room viewport */ #cats .roomEditorButton{ position:fixed!important; top:454px!important; right:max(16px,env(safe-area-inset-right))!important; bottom:auto!important; left:auto!important; z-index:2147482000!important; } /* v409 — rollback broken v407/v408 positioning; isolate Home only */ #cats.roomPage{ position:relative!important; left:auto!important;right:auto!important;top:auto!important;bottom:auto!important; width:calc(100% + 40px)!important; height:calc(100dvh - 300px)!important; min-height:570px!important; margin-left:-20px!important;margin-right:-20px!important; padding:0!important;overflow:hidden!important; } #cats .roomViewport{ position:relative!important;inset:auto!important; width:100%!important;height:100%!important; min-height:570px!important;max-height:none!important; overflow-x:auto!important;overflow-y:hidden!important; -webkit-overflow-scrolling:touch!important; } #cats .roomCanvas{height:100%!important;min-height:570px!important} #cats .roomEditorButton{ position:sticky!important; float:right!important; top:16px!important; right:16px!important; bottom:auto!important;left:auto!important; margin:16px 16px 0 0!important; z-index:2147482000!important; } /* never let Home layout affect Life/card pages */ #life.page,#collection.page,#depot.page,#market.page,#tasks.page{position:relative!important;inset:auto!important} #app > nav.mainNavV369{display:grid!important} #cats.active ~ nav.mainNavV369,#cats.on ~ nav.mainNavV369{display:none!important} /* v410 — Safari cleanup: no room bleed under cards; room fills viewport bounds */ #life{overflow:hidden!important} #life .cardQuickSwitch{ position:relative!important; z-index:40!important; background:#080b13!important; overflow:hidden!important; } #life .cardQuickSwitch:before,#life .cardQuickSwitch:after{content:none!important;display:none!important} /* eliminate the room/ceiling strip that leaked below the card */ #life + #cats:not(.active):not(.on),#cats:not(.active):not(.on){display:none!important} /* Home: exact visible viewport, edge to edge */ #cats.roomPage.active,#cats.roomPage.on{ display:block!important; position:absolute!important; left:0!important;right:0!important; top:292px!important; bottom:0!important; width:100%!important;height:auto!important; min-height:0!important; margin:0!important;padding:0!important; overflow:hidden!important; z-index:20!important; } #cats.roomPage.active .roomViewport,#cats.roomPage.on .roomViewport{ position:absolute!important;inset:0!important; width:100%!important;height:100%!important; min-height:0!important;margin:0!important;padding:0!important; overflow-x:auto!important;overflow-y:hidden!important; } #cats.roomPage.active .roomCanvas,#cats.roomPage.on .roomCanvas{ height:100%!important;min-height:100%!important; background-size:100% 100%!important; background-position:center top!important; } #cats.roomPage.active .roomEditorButton,#cats.roomPage.on .roomEditorButton{ position:fixed!important; top:310px!important; right:16px!important;left:auto!important;bottom:auto!important; float:none!important;margin:0!important; z-index:2147482000!important; } /* v411 — restore Life layout; fit Home without hard-coded top */ #life .cardQuickSwitch{ position:absolute!important; z-index:30!important; background:transparent!important; overflow:visible!important; } /* Home is normal-flow again: starts directly under the shared header */ #cats.roomPage.active,#cats.roomPage.on{ display:block!important; position:relative!important; inset:auto!important; left:auto!important;right:auto!important;top:auto!important;bottom:auto!important; width:calc(100% + 40px)!important; height:calc(100svh - 300px)!important; min-height:570px!important; margin-left:-20px!important;margin-right:-20px!important; padding:0!important;overflow:hidden!important; z-index:auto!important; } #cats.roomPage.active .roomViewport,#cats.roomPage.on .roomViewport{ position:relative!important;inset:auto!important; width:100%!important;height:100%!important; min-height:570px!important; overflow-x:auto!important;overflow-y:hidden!important; } #cats.roomPage.active .roomCanvas,#cats.roomPage.on .roomCanvas{ height:100%!important;min-height:570px!important; background-size:100% 100%!important;background-position:center!important; } #cats.roomPage.active .roomEditorButton,#cats.roomPage.on .roomEditorButton{ position:sticky!important; top:16px!important;right:16px!important;bottom:auto!important; float:right!important;margin:16px 16px 0 0!important; } /* hide global nav only on Home without changing other pages */ body:has(#cats.active) #app > nav.mainNavV369, body:has(#cats.on) #app > nav.mainNavV369{display:none!important} /* v412 — Home fullscreen: hide top brand/energy/wallet/theme row, keep economy at top */ body:has(#cats.active) #app > header, body:has(#cats.on) #app > header, body:has(#cats.active) #app > .topbar, body:has(#cats.on) #app > .topbar, body:has(#cats.active) #app > .header, body:has(#cats.on) #app > .header{display:none!important} /* economy bar becomes the only Home header */ body:has(#cats.active) #app > .money.economy4, body:has(#cats.on) #app > .money.economy4{ position:fixed!important; left:10px!important;right:10px!important;top:8px!important; width:auto!important;margin:0!important; z-index:2147482500!important; } /* room occupies every remaining pixel below economy */ #cats.roomPage.active,#cats.roomPage.on{ position:fixed!important; left:0!important;right:0!important; top:92px!important;bottom:0!important; width:100%!important;height:auto!important; min-height:0!important;margin:0!important;padding:0!important; overflow:hidden!important;z-index:100!important; } #cats.roomPage.active .roomViewport,#cats.roomPage.on .roomViewport{ position:absolute!important;inset:0!important; width:100%!important;height:100%!important;min-height:0!important; margin:0!important;padding:0!important; overflow-x:auto!important;overflow-y:hidden!important; } #cats.roomPage.active .roomCanvas,#cats.roomPage.on .roomCanvas{ height:100%!important;min-height:100%!important; background-size:100% 100%!important;background-position:center!important; } /* editor stays in the visible room, top-right, independent of horizontal room scroll */ #cats.roomPage.active .roomEditorButton,#cats.roomPage.on .roomEditorButton{ position:fixed!important; top:108px!important;right:16px!important;bottom:auto!important;left:auto!important; float:none!important;margin:0!important;z-index:2147483000!important; } body:has(#cats.active) #app > nav.mainNavV369, body:has(#cats.on) #app > nav.mainNavV369{display:none!important} /* v413 — Home: economy flush to top, room fills everything below it */ body:has(#cats.active) #app > .money.economy4, body:has(#cats.on) #app > .money.economy4{ top:0!important; left:0!important;right:0!important; width:100%!important; margin:0!important; border-radius:0 0 22px 22px!important; z-index:2147483000!important; } #cats.roomPage.active,#cats.roomPage.on{ top:0!important;bottom:0!important; } #cats.roomPage.active .roomViewport,#cats.roomPage.on .roomViewport{ top:0!important;bottom:0!important;height:100%!important; } #cats.roomPage.active .roomCanvas,#cats.roomPage.on .roomCanvas{ height:100%!important;min-height:100%!important; background-size:100% 100%!important; background-position:center center!important; } /* editor stays in room, just below resource panel */ #cats.roomPage.active .roomEditorButton,#cats.roomPage.on .roomEditorButton{ top:104px!important;right:14px!important; } /* v413 — Home: only resources overlay; room fills everything behind it */ body:has(#cats.active) header > *:not(.money):not(.economy4), body:has(#cats.on) header > *:not(.money):not(.economy4), body:has(#cats.active) #app > *:not(main):not(.money):not(.economy4), body:has(#cats.on) #app > *:not(main):not(.money):not(.economy4){ } /* explicitly remove the marked top controls on Home */ body:has(#cats.active) .brand,body:has(#cats.on) .brand, body:has(#cats.active) .energy,body:has(#cats.on) .energy, body:has(#cats.active) .wallet,body:has(#cats.on) .wallet, body:has(#cats.active) .themeSwitch,body:has(#cats.on) .themeSwitch, body:has(#cats.active) .themeDots,body:has(#cats.on) .themeDots, body:has(#cats.active) .themes,body:has(#cats.on) .themes{ display:none!important;visibility:hidden!important; } /* resource panel at very top of the web app */ body:has(#cats.active) #app > .money.economy4, body:has(#cats.on) #app > .money.economy4{ position:fixed!important; top:8px!important;left:10px!important;right:10px!important; width:auto!important;margin:0!important; z-index:2147483000!important; } /* room itself occupies the entire available browser viewport */ #cats.roomPage.active,#cats.roomPage.on{ position:fixed!important;inset:0!important; width:100vw!important;height:100dvh!important; min-height:100svh!important; margin:0!important;padding:0!important; overflow:hidden!important;z-index:100!important; } #cats.roomPage.active .roomViewport,#cats.roomPage.on .roomViewport{ position:absolute!important;inset:0!important; width:100%!important;height:100%!important;min-height:100%!important; } #cats.roomPage.active .roomCanvas,#cats.roomPage.on .roomCanvas{ height:100%!important;min-height:100%!important; background-size:100% 100%!important;background-position:center center!important; } /* editor stays in the room, below the resource overlay */ #cats.roomPage.active .roomEditorButton,#cats.roomPage.on .roomEditorButton{ position:fixed!important;top:108px!important;right:14px!important; left:auto!important;bottom:auto!important;margin:0!important;float:none!important; z-index:2147483100!important; } /* v414 — compact Home resources + no theme/background switcher */ body:has(#cats.active) #app > .money.economy4, body:has(#cats.on) #app > .money.economy4{ left:22px!important;right:22px!important; top:8px!important; width:auto!important; height:72px!important; min-height:72px!important; padding:8px 10px!important; border-radius:22px!important; } body:has(#cats.active) #app > .money.economy4 .currencyLabel, body:has(#cats.on) #app > .money.economy4 .currencyLabel{ font-size:8px!important;line-height:10px!important; } body:has(#cats.active) #app > .money.economy4 .currencyValue, body:has(#cats.on) #app > .money.economy4 .currencyValue{ font-size:19px!important;line-height:22px!important;height:22px!important; } body:has(#cats.active) #app > .money.economy4 .currencyValue img.economyIcon, body:has(#cats.on) #app > .money.economy4 .currencyValue img.economyIcon{ width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important; max-width:18px!important;max-height:18px!important; } /* background/theme selector is never shown inside Home */ body:has(#cats.active) .themeSwitch, body:has(#cats.active) .themeDots, body:has(#cats.active) .themes, body:has(#cats.on) .themeSwitch, body:has(#cats.on) .themeDots, body:has(#cats.on) .themes{display:none!important} /* editor follows the smaller resource panel */ #cats.roomPage.active .roomEditorButton,#cats.roomPage.on .roomEditorButton{ top:92px!important; } /* v415 — extra compact Home resource HUD */ body:has(#cats.active) #app > .money.economy4, body:has(#cats.on) #app > .money.economy4{ left:38px!important;right:38px!important; top:7px!important; height:58px!important;min-height:58px!important; padding:5px 7px!important; border-radius:18px!important; } body:has(#cats.active) #app > .money.economy4 .currencyLabel, body:has(#cats.on) #app > .money.economy4 .currencyLabel{ font-size:7px!important;line-height:8px!important; } body:has(#cats.active) #app > .money.economy4 .currencyValue, body:has(#cats.on) #app > .money.economy4 .currencyValue{ font-size:16px!important;line-height:19px!important;height:19px!important; } body:has(#cats.active) #app > .money.economy4 .currencyValue img.economyIcon, body:has(#cats.on) #app > .money.economy4 .currencyValue img.economyIcon{ width:15px!important;height:15px!important; min-width:15px!important;min-height:15px!important; max-width:15px!important;max-height:15px!important; } #cats.roomPage.active .roomEditorButton,#cats.roomPage.on .roomEditorButton{top:76px!important} /* v416 — Home HUD 50% narrower + force-hide background selector */ body:has(#cats.active) .themeSwitch, body:has(#cats.active) .themeDots, body:has(#cats.active) .themes, body:has(#cats.active) [class*="themeSwitch"], body:has(#cats.active) [class*="themeDots"], body:has(#cats.on) .themeSwitch, body:has(#cats.on) .themeDots, body:has(#cats.on) .themes, body:has(#cats.on) [class*="themeSwitch"], body:has(#cats.on) [class*="themeDots"]{ display:none!important;visibility:hidden!important;opacity:0!important; pointer-events:none!important; } /* exactly half of the previous HUD width, centered */ body:has(#cats.active) #app > .money.economy4, body:has(#cats.on) #app > .money.economy4{ left:50%!important;right:auto!important; width:calc((100% - 76px) / 2)!important; transform:translateX(-50%)!important; height:58px!important;min-height:58px!important; padding:5px 6px!important; } /* keep four resource columns readable in the narrower HUD */ body:has(#cats.active) #app > .money.economy4 .currencyLabel, body:has(#cats.on) #app > .money.economy4 .currencyLabel{ font-size:5.5px!important;letter-spacing:.08em!important; } body:has(#cats.active) #app > .money.economy4 .currencyValue, body:has(#cats.on) #app > .money.economy4 .currencyValue{ font-size:12px!important;line-height:16px!important;height:16px!important; gap:2px!important; } body:has(#cats.active) #app > .money.economy4 .currencyValue img.economyIcon, body:has(#cats.on) #app > .money.economy4 .currencyValue img.economyIcon{ width:12px!important;height:12px!important;min-width:12px!important;min-height:12px!important; max-width:12px!important;max-height:12px!important; } /* v417 — Home side controls + slide-out panels */ body:has(#cats.active) #app > .money.economy4, body:has(#cats.on) #app > .money.economy4{ left:auto!important;right:68px!important;top:12px!important; width:calc(50% - 52px)!important; transform:translateX(120%)!important; opacity:0!important;pointer-events:none!important; transition:transform .28s ease,opacity .22s ease!important; } body:has(#cats.active) #app > .money.economy4.roomHudOpen, body:has(#cats.on) #app > .money.economy4.roomHudOpen{ transform:translateX(0)!important;opacity:1!important;pointer-events:auto!important; } .roomSideControls{ position:fixed!important;right:10px!important;top:14px!important; z-index:2147483200!important; display:flex!important;flex-direction:column!important;gap:8px!important; } .roomSideControls button{ width:48px!important;height:48px!important;padding:0!important; display:flex!important;align-items:center!important;justify-content:center!important; border:1px solid #3d4668!important;border-radius:15px!important; background:linear-gradient(180deg,#18213f,#090e20)!important; box-shadow:0 6px 18px rgba(0,0,0,.38)!important; color:#fff!important;font-size:22px!important;font-weight:900!important; } .roomSideControls button:active{transform:scale(.94)!important} #cats .roomEditorButton{display:none!important} /* furniture drawer reuses the existing editor but shows only item content */ #cats .roomEditor{ position:fixed!important;left:auto!important;right:68px!important;top:68px!important;bottom:auto!important; width:min(330px,calc(100vw - 88px))!important;max-height:55vh!important; transform:translateX(120%)!important;opacity:0!important;pointer-events:none!important; transition:transform .28s ease,opacity .22s ease!important; z-index:2147483150!important; } #cats .roomEditor.open{ transform:translateX(0)!important;opacity:1!important;pointer-events:auto!important; } #cats .roomEditor.open .roomTabs{display:none!important} /* v418 — remove the 5-style background selector from Home for good */ #cats.active ~ .themeSwitch,#cats.active ~ .themeDots,#cats.active ~ .themes, #cats.on ~ .themeSwitch,#cats.on ~ .themeDots,#cats.on ~ .themes, body:has(#cats.active) [class*="theme"], body:has(#cats.on) [class*="theme"]{ display:none!important; visibility:hidden!important; opacity:0!important; pointer-events:none!important; } /* the selector is part of the shared header in some builds */ body:has(#cats.active) .topThemes, body:has(#cats.on) .topThemes, body:has(#cats.active) .bgSwitch, body:has(#cats.on) .bgSwitch, body:has(#cats.active) .backgroundSwitch, body:has(#cats.on) .backgroundSwitch{ display:none!important; } /* v419 — large resources drawer + accordion room editor */ body:has(#cats.active) #app > .money.economy4, body:has(#cats.on) #app > .money.economy4{ right:72px!important;left:18px!important;top:14px!important; width:auto!important;height:82px!important;min-height:82px!important; padding:9px 12px!important;border-radius:22px!important; transform:translateX(115%)!important; } body:has(#cats.active) #app > .money.economy4.roomHudOpen, body:has(#cats.on) #app > .money.economy4.roomHudOpen{transform:translateX(0)!important} body:has(#cats.active) #app > .money.economy4 .currencyLabel, body:has(#cats.on) #app > .money.economy4 .currencyLabel{font-size:8px!important;line-height:10px!important;letter-spacing:.13em!important} body:has(#cats.active) #app > .money.economy4 .currencyValue, body:has(#cats.on) #app > .money.economy4 .currencyValue{font-size:19px!important;line-height:24px!important;height:24px!important;gap:4px!important} body:has(#cats.active) #app > .money.economy4 .currencyValue img.economyIcon, body:has(#cats.on) #app > .money.economy4 .currencyValue img.economyIcon{width:19px!important;height:19px!important;min-width:19px!important;min-height:19px!important;max-width:19px!important;max-height:19px!important} #cats .roomEditor{ right:72px!important;left:18px!important;top:14px!important;width:auto!important; max-height:calc(100dvh - 110px)!important;overflow:auto!important; border-radius:22px!important;background:rgba(7,12,29,.97)!important; box-shadow:0 14px 40px rgba(0,0,0,.48)!important; transform:translateX(115%)!important; } #cats .roomEditor.open{transform:translateX(0)!important} .roomEditorHead{position:sticky!important;top:0!important;z-index:4!important;background:#090f24!important;padding:14px 16px!important} .roomAccordion{padding:8px 10px 12px!important} .roomSectionBtn{ width:100%!important;height:56px!important;margin:6px 0!important;padding:0 14px!important; display:grid!important;grid-template-columns:34px 1fr 24px!important;align-items:center!important; text-align:left!important;border:1px solid #303a5d!important;border-radius:15px!important; background:linear-gradient(180deg,#151d38,#0b1025)!important;color:#fff!important; } .roomSectionBtn span{font-size:22px!important}.roomSectionBtn b{font-size:12px!important;letter-spacing:.13em!important} .roomSectionBtn i{font-style:normal!important;font-size:27px!important;transition:transform .25s ease!important} .roomSectionBtn.on i{transform:rotate(90deg)!important} .roomSectionBody{ max-height:0!important;opacity:0!important;overflow:hidden!important; transition:max-height .34s ease,opacity .22s ease,padding .3s ease!important; padding:0 4px!important; } .roomSectionBody.open{max-height:360px!important;opacity:1!important;padding:6px 4px 12px!important;overflow-x:auto!important} .roomSectionBody .roomChoices{display:flex!important;gap:10px!important;overflow-x:auto!important;padding:3px!important} .roomSectionBody .roomItemChoice,.roomSectionBody .roomSwatch{flex:0 0 105px!important;min-width:105px!important} /* v420 — lock v419 room design; repair resource drawer typography/layout */ body:has(#cats.active) #app > .money.economy4, body:has(#cats.on) #app > .money.economy4{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; align-items:center!important; column-gap:0!important; padding:8px 8px!important; overflow:hidden!important; } body:has(#cats.active) #app > .money.economy4 > *, body:has(#cats.on) #app > .money.economy4 > *{ min-width:0!important;width:100%!important;height:58px!important; display:flex!important;flex-direction:column!important; align-items:center!important;justify-content:center!important; padding:0 5px!important;margin:0!important; box-sizing:border-box!important; border-right:1px solid rgba(126,139,181,.24)!important; } body:has(#cats.active) #app > .money.economy4 > *:last-child, body:has(#cats.on) #app > .money.economy4 > *:last-child{border-right:0!important} body:has(#cats.active) #app > .money.economy4 .currencyLabel, body:has(#cats.on) #app > .money.economy4 .currencyLabel{ display:block!important;width:100%!important;height:auto!important; margin:0 0 4px!important;padding:0!important; text-align:center!important;white-space:nowrap!important; font-size:7px!important;line-height:9px!important;letter-spacing:.12em!important; overflow:hidden!important;text-overflow:clip!important; } body:has(#cats.active) #app > .money.economy4 .currencyValue, body:has(#cats.on) #app > .money.economy4 .currencyValue{ display:flex!important;flex-direction:row!important; align-items:center!important;justify-content:center!important; width:100%!important;height:23px!important;margin:0!important;padding:0!important; gap:3px!important;white-space:nowrap!important; font-size:17px!important;line-height:23px!important;letter-spacing:0!important; overflow:visible!important; } body:has(#cats.active) #app > .money.economy4 .currencyValue img.economyIcon, body:has(#cats.on) #app > .money.economy4 .currencyValue img.economyIcon{ flex:0 0 17px!important;width:17px!important;height:17px!important; min-width:17px!important;min-height:17px!important;max-width:17px!important;max-height:17px!important; margin:0!important;object-fit:contain!important; } /* v421 — resource HUD prepared for large balances */ body:has(#cats.active) #app > .money.economy4, body:has(#cats.on) #app > .money.economy4{ grid-template-columns:1fr 1.22fr 1fr 1.08fr!important; padding:8px 10px!important; } body:has(#cats.active) #app > .money.economy4 > *, body:has(#cats.on) #app > .money.economy4 > *{ min-width:0!important; padding:0 7px!important; overflow:hidden!important; } body:has(#cats.active) #app > .money.economy4 .currencyValue, body:has(#cats.on) #app > .money.economy4 .currencyValue{ width:100%!important;max-width:100%!important;min-width:0!important; justify-content:center!important; font-size:clamp(12px,3.65vw,17px)!important; line-height:22px!important; font-variant-numeric:tabular-nums!important; letter-spacing:-.025em!important; overflow:hidden!important; } body:has(#cats.active) #app > .money.economy4 .currencyValue img.economyIcon, body:has(#cats.on) #app > .money.economy4 .currencyValue img.economyIcon{ flex:0 0 16px!important;width:16px!important;height:16px!important; min-width:16px!important;min-height:16px!important;max-width:16px!important;max-height:16px!important; } body:has(#cats.active) #app > .money.economy4 .currencyLabel, body:has(#cats.on) #app > .money.economy4 .currencyLabel{ max-width:100%!important;overflow:hidden!important; font-size:clamp(5.5px,1.65vw,7px)!important; } /* progressively shrink only the numeric text when a balance string is long */ body:has(#cats.active) #app > .money.economy4 .currencyValue, body:has(#cats.on) #app > .money.economy4 .currencyValue{ container-type:inline-size!important; } /* v422 — RESOURCE DRAWER REBUILT FROM ZERO. Home only. */ body:has(#cats.active) #app > section.money.economy4, body:has(#cats.on) #app > section.money.economy4{ position:fixed!important; top:14px!important;left:16px!important;right:72px!important; width:auto!important;height:92px!important;min-height:92px!important; margin:0!important;padding:8px!important; display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:0!important;align-items:stretch!important; box-sizing:border-box!important; border:1px solid #303956!important;border-radius:24px!important; background:rgba(8,13,30,.97)!important; box-shadow:0 12px 32px rgba(0,0,0,.42)!important; overflow:hidden!important; transform:translate3d(calc(100vw + 40px),0,0)!important; opacity:0!important;pointer-events:none!important; transition:transform .3s cubic-bezier(.22,.8,.22,1),opacity .18s ease!important; z-index:2147483150!important; } body:has(#cats.active) #app > section.money.economy4.roomHudOpen, body:has(#cats.on) #app > section.money.economy4.roomHudOpen{ transform:translate3d(0,0,0)!important;opacity:1!important;pointer-events:auto!important; } body:has(#cats.active) #app > section.money.economy4 > .resCell, body:has(#cats.on) #app > section.money.economy4 > .resCell{ min-width:0!important;width:auto!important;height:auto!important; margin:0!important;padding:8px 5px!important; display:grid!important;grid-template-rows:14px minmax(28px,1fr)!important; place-items:center!important;align-content:center!important; box-sizing:border-box!important;overflow:hidden!important; border:0!important;border-right:1px solid rgba(132,145,181,.25)!important; } body:has(#cats.active) #app > section.money.economy4 > .resCell:last-child, body:has(#cats.on) #app > section.money.economy4 > .resCell:last-child{border-right:0!important} body:has(#cats.active) .economy4 .resLabel, body:has(#cats.on) .economy4 .resLabel{ display:block!important;width:100%!important;min-width:0!important; margin:0!important;padding:0!important;text-align:center!important; white-space:nowrap!important;overflow:hidden!important; color:#8f96aa!important;font-size:7px!important;font-weight:800!important; line-height:10px!important;letter-spacing:.12em!important; } body:has(#cats.active) .economy4 .currencyValue, body:has(#cats.on) .economy4 .currencyValue{ display:grid!important;grid-template-columns:16px minmax(0,1fr)!important; align-items:center!important;justify-items:start!important; width:100%!important;min-width:0!important;height:30px!important; margin:0!important;padding:0 2px!important;gap:3px!important; box-sizing:border-box!important;overflow:hidden!important; font-size:0!important;line-height:1!important; } body:has(#cats.active) .economy4 .currencyValue .economyIcon, body:has(#cats.on) .economy4 .currencyValue .economyIcon{ position:static!important;display:block!important;grid-column:1!important; width:16px!important;height:16px!important;min-width:16px!important;min-height:16px!important; max-width:16px!important;max-height:16px!important;margin:0!important; object-fit:contain!important;transform:none!important; } body:has(#cats.active) .economy4 .currencyValue > i, body:has(#cats.on) .economy4 .currencyValue > i{ display:block!important;grid-column:2!important;min-width:0!important;max-width:100%!important; margin:0!important;padding:0!important;overflow:hidden!important; white-space:nowrap!important;text-overflow:ellipsis!important; color:#f7f8fc!important;font-style:normal!important;font-weight:800!important; font-size:clamp(11px,3.35vw,18px)!important;line-height:24px!important; letter-spacing:-.04em!important;font-variant-numeric:tabular-nums!important; } /* v425 — compact values fit identically in room resource drawer */ body:has(#cats.active) .economy4 .currencyValue, body:has(#cats.on) .economy4 .currencyValue{ grid-template-columns:18px minmax(0,1fr)!important; gap:5px!important;padding:0 5px!important; } body:has(#cats.active) .economy4 .currencyValue > i, body:has(#cats.on) .economy4 .currencyValue > i{ font-size:15px!important;letter-spacing:-.02em!important;text-overflow:clip!important; } body:has(#cats.active) .economy4 .currencyValue .economyIcon, body:has(#cats.on) .economy4 .currencyValue .economyIcon{ width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important; max-width:18px!important;max-height:18px!important; } /* v426 — final resource values: compact everywhere + roomy Home drawer */ body:has(#cats.active) #app > section.money.economy4, body:has(#cats.on) #app > section.money.economy4{ left:10px!important;right:64px!important;width:auto!important;padding:7px 5px!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; } body:has(#cats.active) #app > section.money.economy4 > .resCell, body:has(#cats.on) #app > section.money.economy4 > .resCell{ padding:7px 2px!important;overflow:visible!important; } body:has(#cats.active) .economy4 .currencyValue, body:has(#cats.on) .economy4 .currencyValue{ display:flex!important;grid-template-columns:none!important; align-items:center!important;justify-content:center!important; gap:4px!important;padding:0 1px!important;overflow:visible!important; } body:has(#cats.active) .economy4 .currencyValue > i, body:has(#cats.on) .economy4 .currencyValue > i{ flex:0 1 auto!important;width:auto!important;max-width:calc(100% - 20px)!important; overflow:visible!important;text-overflow:clip!important; font-size:clamp(12px,3.25vw,16px)!important;letter-spacing:-.04em!important; } body:has(#cats.active) .economy4 .currencyValue .economyIcon, body:has(#cats.on) .economy4 .currencyValue .economyIcon{ flex:0 0 16px!important;width:16px!important;height:16px!important; min-width:16px!important;min-height:16px!important;max-width:16px!important;max-height:16px!important; } /* normal card HUD: same compact formatter, enough width for 100K / 1M / 163,5K */ #app > section.money.economy4:not(.roomHudOpen) .currencyValue > i{ white-space:nowrap!important; } /* v427 — hard override room drawer, no clipping on iPhone Safari */ body:has(#cats.active) #app > .money.economy4.roomHudOpen, body:has(#cats.on) #app > .money.economy4.roomHudOpen{ left:8px!important;right:62px!important;width:auto!important; height:96px!important;min-height:96px!important;padding:7px 3px!important; overflow:visible!important; grid-template-columns:repeat(4,1fr)!important; } body:has(#cats.active) #app > .money.economy4.roomHudOpen .resCell, body:has(#cats.on) #app > .money.economy4.roomHudOpen .resCell{ min-width:0!important;padding:5px 1px!important;overflow:visible!important; } body:has(#cats.active) #app > .money.economy4.roomHudOpen .currencyValue, body:has(#cats.on) #app > .money.economy4.roomHudOpen .currencyValue{ width:100%!important;max-width:none!important;min-width:0!important; display:flex!important;align-items:center!important;justify-content:center!important; gap:3px!important;overflow:visible!important;padding:0!important; } body:has(#cats.active) #app > .money.economy4.roomHudOpen .currencyValue>i, body:has(#cats.on) #app > .money.economy4.roomHudOpen .currencyValue>i{ display:block!important;position:static!important; width:auto!important;min-width:0!important;max-width:none!important; flex:0 0 auto!important;overflow:visible!important;text-overflow:clip!important; white-space:nowrap!important;font-size:15px!important;line-height:22px!important; } body:has(#cats.active) #app > .money.economy4.roomHudOpen .currencyValue>img, body:has(#cats.on) #app > .money.economy4.roomHudOpen .currencyValue>img{ flex:0 0 15px!important;width:15px!important;height:15px!important; min-width:15px!important;min-height:15px!important;max-width:15px!important;max-height:15px!important; } /* v428 — wider Home resource drawer, equal cells, no value clipping */ body:has(#cats.active) #app > .money.economy4.roomHudOpen, body:has(#cats.on) #app > .money.economy4.roomHudOpen{ left:10px!important; right:54px!important; width:auto!important; height:102px!important; min-height:102px!important; padding:8px 4px!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; overflow:hidden!important; } body:has(#cats.active) #app > .money.economy4.roomHudOpen .resCell, body:has(#cats.on) #app > .money.economy4.roomHudOpen .resCell{ min-width:0!important; padding:6px 3px!important; overflow:hidden!important; } body:has(#cats.active) #app > .money.economy4.roomHudOpen .currencyValue, body:has(#cats.on) #app > .money.economy4.roomHudOpen .currencyValue{ width:100%!important; min-width:0!important; justify-content:center!important; gap:4px!important; overflow:hidden!important; } body:has(#cats.active) #app > .money.economy4.roomHudOpen .currencyValue>i, body:has(#cats.on) #app > .money.economy4.roomHudOpen .currencyValue>i{ min-width:0!important; max-width:calc(100% - 19px)!important; flex:0 1 auto!important; overflow:visible!important; white-space:nowrap!important; font-size:clamp(13px,3.7vw,17px)!important; letter-spacing:-.03em!important; } /* v430 — wallpaper overlay follows the three visible wall planes of baked room art */ #cats .roomCanvas.customWallpaper::after{ content:""!important; display:block!important; position:absolute!important; inset:0!important; z-index:6!important; pointer-events:none!important; background-image:var(--custom-wallpaper)!important; background-size:100% 100%!important; background-position:center!important; background-repeat:no-repeat!important; /* only wallpaper area: left wall + back wall + right wall; ceiling/floor/plinths stay original */ clip-path:polygon( 0 0, 12.9% 12.7%, 87.1% 12.7%, 100% 0, 100% 63.8%, 87.1% 55.9%, 12.9% 55.9%, 0 63.8% )!important; } /* v432 — wallpaper image is already a perspective wall composite; show it 1:1 over wall area */ #cats .roomCanvas.customWallpaper::after{ content:""!important; display:block!important; position:absolute!important; left:0!important;right:0!important;top:0!important; width:100%!important;height:64%!important; z-index:6!important;pointer-events:none!important; background-image:var(--custom-wallpaper)!important; background-size:100% 100%!important; background-position:center top!important; background-repeat:no-repeat!important; clip-path:none!important; } /* v433 — fit replacement wallpaper inside the original room trim */ #cats .roomCanvas.customWallpaper::after{ left:0!important; right:0!important; top:7.6%!important; width:100%!important; height:55.8%!important; bottom:auto!important; background-size:100% 100%!important; background-position:center center!important; background-repeat:no-repeat!important; clip-path:none!important; z-index:6!important; } /* keep original ceiling/cornices/baseboards visually above replacement wallpaper */ #cats .roomCanvas.customWallpaper .roomCeilingAsset, #cats .roomCanvas.customWallpaper .roomTopPlinth, #cats .roomCanvas.customWallpaper .roomBasePlinth, #cats .roomCanvas.customWallpaper .roomSidePlinth{ z-index:12!important; } /* v433 — geometry-only wallpaper layer, full room coordinate system */ #cats .roomCanvas.customWallpaper::after{ content:""!important;display:block!important; position:absolute!important;inset:0!important; width:100%!important;height:100%!important; z-index:6!important;pointer-events:none!important; background-image:var(--custom-wallpaper)!important; background-size:100% 100%!important; background-position:center center!important; background-repeat:no-repeat!important; clip-path:none!important; } /* v434 — keep wallpaper PNG native aspect ratio; align its wall geometry to room trim */ #cats .roomCanvas.customWallpaper::after{ inset:0!important; width:100%!important;height:100%!important; background-size:100% auto!important; background-position:center top!important; background-repeat:no-repeat!important; } /* v435 — wallpaper follows the room's real wall planes, not the PNG silhouette */ #cats .roomCanvas.customWallpaper::after{display:none!important} #cats .roomCanvas.customWallpaper .roomWall, #cats .roomCanvas.customWallpaper .roomSideWall{display:block!important;pointer-events:none!important;background-image:var(--custom-wallpaper)!important} /* central wall: exactly between the baked upper/lower trim */ #cats .roomCanvas.customWallpaper .roomWall{ position:absolute!important; left:12.9%!important;right:12.9%!important; top:12.7%!important;height:43.2%!important;bottom:auto!important; z-index:6!important;clip-path:none!important; background-size:162% auto!important; background-position:center 53%!important; background-repeat:no-repeat!important; filter:none!important; } /* side walls terminate on the same trim lines and follow perspective */ #cats .roomCanvas.customWallpaper .roomSideWall{ position:absolute!important;top:0!important;height:63.8%!important;bottom:auto!important; width:12.9%!important;z-index:6!important; background-size:900% auto!important;background-repeat:no-repeat!important; filter:brightness(.82)!important; } #cats .roomCanvas.customWallpaper .roomSideWallLeft{ left:0!important;right:auto!important; clip-path:polygon(0 0,100% 19.9%,100% 87.6%,0 100%)!important; background-position:left center!important; } #cats .roomCanvas.customWallpaper .roomSideWallRight{ right:0!important;left:auto!important; clip-path:polygon(0 19.9%,100% 0,100% 100%,0 87.6%)!important; background-position:right center!important; } /* v436 — final wallpaper template: transparent full-canvas asset, 1:1 geometry */ #cats .roomCanvas.customWallpaper::after{ content:""!important;display:block!important; position:absolute!important;inset:0!important; width:100%!important;height:100%!important; z-index:6!important;pointer-events:none!important; background-image:var(--custom-wallpaper)!important; background-size:100% 100%!important; background-position:center!important; background-repeat:no-repeat!important; clip-path:none!important; } #cats .roomCanvas.customWallpaper .roomWall, #cats .roomCanvas.customWallpaper .roomSideWall{display:none!important} /* v439 — calibrated wallpaper geometry from room reference */ #cats .roomCanvas.customWallpaper::after{ left:-7.5%!important;right:auto!important; top:-15.8%!important;bottom:auto!important; width:115%!important;height:115%!important; background-size:100% 100%!important; background-position:center!important; transform:none!important; } /* v440 — second room-wall calibration: preserve width, extend wall layer vertically */ #cats .roomCanvas.customWallpaper::after{ left:-7.5%!important;right:auto!important; top:-25.5%!important;bottom:auto!important; width:115%!important;height:125%!important; background-size:100% 100%!important; background-position:center!important; } /* v441 — restore room trim above wallpaper; wallpaper stays behind architectural borders */ #cats .roomCanvas.customWallpaper::after{ z-index:4!important; } #cats .roomCanvas.customWallpaper .roomTopPlinth, #cats .roomCanvas.customWallpaper .roomBasePlinth, #cats .roomCanvas.customWallpaper .roomSidePlinth{ display:block!important; z-index:7!important; pointer-events:none!important; } /* v442 — wallpaper calibration only; trim variants remain independent editor layers */ #cats .roomCanvas.customWallpaper::after{ z-index:6!important; left:-7.5%!important;top:-25.5%!important; width:115%!important;height:125%!important; } #cats .roomCanvas.customWallpaper .roomTopPlinth, #cats .roomCanvas.customWallpaper .roomBasePlinth, #cats .roomCanvas.customWallpaper .roomSidePlinth{ display:none!important; } /* v443 — test full-room replacement artwork; exact same room canvas, no wallpaper overlay */ #cats .roomCanvas.customWallpaper{ background-image:url('assets/111EBF04-4636-4C5B-9957-CA6FDC540A3E.png')!important; background-position:center center!important; background-size:100% 100%!important; background-repeat:no-repeat!important; } #cats .roomCanvas.customWallpaper::after{display:none!important;content:none!important} /* v447 — real room cat artwork */ #cats .roomCat{font-size:0!important;display:block!important;background:none!important} #cats .roomCat img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;pointer-events:none!important;user-select:none!important;-webkit-user-drag:none!important;filter:drop-shadow(0 10px 8px rgba(0,0,0,.28))} /* v448 — room cat x2 */ #cats .roomCat{width:176px!important;height:204px!important} /* v452 — item controls stay attached to selected furniture */ #cats .roomObject{overflow:visible!important} #cats .roomObjectTools{right:4px!important;top:4px!important;transform:none!important;z-index:50!important} #cats .roomObject.selected .roomObjectTools{display:flex!important} /* v453 — class 3 cabinet proportion prototype */ #cats .roomObject-cabinet{ border:0!important;border-radius:9px 9px 4px 4px!important; background:linear-gradient(90deg,#4a2d1f 0 3%,#80543a 4% 48%,#513323 49% 52%,#80543a 53% 97%,#4a2d1f 98% 100%)!important; box-shadow:inset 0 0 0 3px #3d271d,inset 0 9px 0 rgba(255,255,255,.07),0 14px 13px rgba(0,0,0,.34)!important; } #cats .roomObject-cabinet:before{ content:""!important;position:absolute!important;left:10%!important;right:52%!important;top:7%!important;bottom:7%!important; border:2px solid #a97849!important;border-radius:4px!important;box-shadow:inset -8px 0 15px rgba(0,0,0,.16)!important; } #cats .roomObject-cabinet:after{ content:""!important;position:absolute!important;left:52%!important;right:10%!important;top:7%!important;bottom:7%!important; border:2px solid #a97849!important;border-radius:4px!important;box-shadow:inset 8px 0 15px rgba(0,0,0,.16)!important; } #cats .roomObject-cabinet>span{display:none!important} #cats .roomObject-cabinet .roomObjectTools{right:6px!important;top:6px!important}