/* Preserved emulator artwork, sizing and animation rules from the former site component sheet. */
.vpet-frame{margin-top:36px;padding:22px;border:1px solid #394640;border-radius:22px;background:linear-gradient(145deg,#2a302f,#101415 58%);box-shadow:0 18px 55px rgba(0,0,0,.4)}
.vpet-screen{min-height:260px;display:grid;place-items:center;border:12px solid #070909;border-radius:14px;background:#c59c26;color:#1b1b0e;box-shadow:inset 0 0 0 2px #e8c649}
.pixel-pet{font-size:76px;filter:saturate(.85);animation:bob 1.4s ease-in-out infinite}
.vpet-screen p{font-size:14px;margin:0}
.vpet-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.vpet-controls button{border:1px solid #4a554f;border-radius:10px;background:#171c1d;color:#e5ece4;padding:16px;font:700 14px ui-monospace,monospace}
.vpet-controls button:focus-visible,.button:focus-visible,input:focus-visible{outline:3px solid var(--lcd);outline-offset:3px}
@keyframes bob{50%{transform:translateY(-7px)}}
@media(max-width:780px){.vpet-screen{min-height:190px}
.vpet-frame{padding:14px}}
.pixel-pet[src]{width:192px;height:192px;object-fit:contain;image-rendering:pixelated;animation:none}
.pixel-pet{width:96px;height:96px;background-repeat:no-repeat;background-position:0 0;background-size:1152px 96px;image-rendering:pixelated;animation:none!important;will-change:transform,background-position;transition:transform 120ms linear}
@media(prefers-reduced-motion:reduce){.pixel-pet{transform:none!important;background-position:0 0!important;transition:none}}
.cloud-care-actions{display:flex;justify-content:center;gap:10px;margin-top:12px}
.cloud-care-actions button{border:1px solid #4a554f;border-radius:7px;background:#171c1d;color:#cdd7ce;padding:8px 14px;font:700 12px ui-monospace,monospace;cursor:pointer}
.cloud-care-actions button:hover{border-color:var(--green);color:var(--green)}
.device-deck{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:30px}
.device-window{padding:18px;border:1px solid var(--line);border-radius:12px;background:#121819}
.device-window h2{margin:0 0 14px;color:var(--green);font-size:15px}
.device-slots{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.device-slot{min-height:150px;border:1px solid #3a4741;border-radius:9px;background:#c59c26;color:#16180d;font:700 12px ui-monospace,monospace;cursor:pointer}
.device-slot:disabled{background:#202725;color:#718078;cursor:default}
.device-slot-sprite{display:block;width:72px;height:72px;margin:8px auto 6px;background-repeat:no-repeat;background-size:864px 72px;background-position:0 0;image-rendering:pixelated;animation:cloud-slot-walk 1s steps(2) infinite}
@keyframes cloud-slot-walk{to{background-position:-144px 0}}
@media(max-width:780px){.device-deck{grid-template-columns:1fr}
.device-window:nth-child(n+2){display:none}}
.device-deck{grid-template-columns:repeat(4,minmax(220px,1fr));gap:18px}
.device-window{position:relative;padding:20px 48px 20px 20px;border-radius:18px;border:2px solid #e7e7e3;background:linear-gradient(145deg,#fbfbf8,#cacbc8);box-shadow:inset 0 0 0 7px #f8f8f5,0 15px 28px #0008}
.device-window h2{position:absolute;top:8px;left:12px;margin:0;color:#202422;font-size:11px;text-transform:uppercase}
.device-slots{margin-top:28px;grid-template-columns:1fr;background:#0b0d0d;border:7px solid #1a2020;border-radius:8px;padding:8px;min-height:145px}
.device-slot{min-height:112px;border:0;border-radius:0;background:linear-gradient(#51c8eb,#bce8f4 54%,#67c65a 55%,#b6ed84);color:#101811}
.device-slot:nth-child(2){display:none}
.device-window:after{content:'';position:absolute;right:15px;top:54px;width:20px;height:20px;border-radius:50%;background:#f26a21;box-shadow:0 42px #f26a21,0 84px #f26a21}
.device-slot-sprite{width:64px;height:64px;background-size:768px 64px}
.device-window:nth-child(2){border-color:#1677d2;background:linear-gradient(145deg,#3d9df3,#0753af)}
.device-window:nth-child(2):after{background:#eb3c3c;box-shadow:0 42px #eb3c3c,0 84px #eb3c3c}
.device-window:nth-child(3){border-color:#15191a;background:linear-gradient(145deg,#313839,#070a0a)}
.device-window:nth-child(4){border-color:#203236;background:linear-gradient(145deg,#293330,#090c0d)}
.device-window:nth-child(4):after{background:#9cec13;box-shadow:0 42px #9cec13,0 84px #9cec13}
@media(max-width:1050px){.device-deck{grid-template-columns:repeat(2,minmax(0,1fr))}
.device-window:nth-child(n+3){display:none}}
@media(max-width:780px){.device-deck{grid-template-columns:repeat(2,minmax(0,1fr))}
.device-window:nth-child(n+2){display:block}
.device-window:nth-child(n+3){display:none}
.device-window{padding:16px 36px 16px 16px}
.device-window:after{right:9px;width:16px;height:16px;box-shadow:0 34px #f26a21,0 68px #f26a21}}
.device-slots{grid-template-columns:repeat(2,minmax(0,1fr))}
.device-slot:nth-child(2){display:block}
.shell-menu{position:absolute;right:10px;bottom:8px;border:0;border-radius:4px;background:#0008;color:#fff;padding:5px;font:700 10px ui-monospace,monospace;cursor:pointer}
.shell-picker{position:absolute;z-index:4;inset:28px 8px 8px 8px;display:grid;gap:5px;padding:8px;border:1px solid #555;border-radius:8px;background:#101515ee}
.shell-picker button{border:1px solid #5d7569;border-radius:4px;background:#17231b;color:#dce8df;font:11px ui-monospace,monospace;cursor:pointer}
.device-window[data-shell="smoke"]{border-color:#6f7474;background:linear-gradient(145deg,#4d5658aa,#161b1dcc)}
.device-window[data-shell="ice-blue"]{border-color:#9eeeff;background:linear-gradient(145deg,#8ce7f7aa,#2397b5)}
.device-window[data-shell="d3-blue"]{border-color:#1877d2;background:linear-gradient(145deg,#42a7fb,#0755b8)}
.device-window[data-shell="cyber-lime"]{border-color:#8dd928;background:linear-gradient(145deg,#253427,#101812)}
.device-window[data-shell="mintmaker"]{border-color:#5fb07b;background:linear-gradient(145deg,#24653f,#103b28)}
.device-window[data-shell="smoke"]:after{background:#d86b15;box-shadow:0 42px #d86b15,0 84px #d86b15}
.device-window[data-shell="ice-blue"]:after{background:#13acc7;box-shadow:0 42px #13acc7,0 84px #13acc7}
.device-window[data-shell="d3-blue"]:after{background:#eb3c3c;box-shadow:0 42px #eb3c3c,0 84px #eb3c3c}
.device-window[data-shell="cyber-lime"]:after{background:#9cec13;box-shadow:0 42px #9cec13,0 84px #9cec13}
.device-window[data-shell="mintmaker"]:after{background:#d17a3e;box-shadow:0 42px #d17a3e,0 84px #d17a3e}
.physical-controls{position:absolute;right:10px;top:52px;display:grid;gap:13px}
.physical-controls button{width:24px;height:24px;border:1px solid #9b3c17;border-radius:50%;background:#f26a21;color:transparent;box-shadow:inset 0 1px 2px #fff7,0 2px 3px #0008;cursor:pointer}
.device-menu{position:absolute;z-index:3;left:30px;right:46px;bottom:24px;padding:5px 7px;border:2px solid #1a2020;background:#c5e68d;color:#16200d;font:700 10px ui-monospace,monospace}
.device-window:after{display:none}
.device-window[data-shell="d3-blue"] .physical-controls button{background:#eb3c3c;border-color:#8f1717}
.device-window[data-shell="cyber-lime"] .physical-controls button{background:#9cec13;border-color:#4f7906}
.device-window[data-shell="ice-blue"] .physical-controls button{background:#13acc7;border-color:#076b80}
.device-window[data-shell="mintmaker"] .physical-controls button{background:#d17a3e;border-color:#743716}
.vault-intro .vpet-frame{display:none}
.device-deck{margin-top:14px}
.device-window{min-height:330px}
.device-slots{grid-template-columns:repeat(2,minmax(0,1fr));min-height:230px;padding:12px;background:linear-gradient(#57caec,#bdebf7 54%,#70c95e 55%,#baf08b);overflow:hidden}
.device-slot{position:relative;min-height:190px;background:transparent!important}
.device-slot-sprite{position:relative;top:56px;animation:cloud-slot-walk 1s steps(2) infinite,pet-one-roam 7s steps(1) infinite}
.device-slot:nth-child(2) .device-slot-sprite{animation:cloud-slot-walk 1s steps(2) infinite,pet-two-roam 8s steps(1) infinite}
@keyframes pet-one-roam{0%,100%{transform:translate(-22px,8px) scaleX(1)}30%{transform:translate(34px,-5px) scaleX(1)}55%{transform:translate(52px,12px) scaleX(-1)}80%{transform:translate(-38px,-8px) scaleX(-1)}}
@keyframes pet-two-roam{0%,100%{transform:translate(30px,12px) scaleX(-1)}28%{transform:translate(-35px,-6px) scaleX(-1)}58%{transform:translate(-48px,8px) scaleX(1)}82%{transform:translate(24px,-9px) scaleX(1)}}
.device-window:has(.device-slot:only-child) .device-slot-sprite{left:38%}
.device-deck{grid-template-columns:repeat(2,minmax(360px,1fr));justify-content:start;max-width:1240px}
.device-window{min-height:390px}
.device-slots{min-height:285px}
.device-slot{min-height:240px}
.device-slot-sprite{top:78px}
.device-menu{bottom:30px}
@media(max-width:780px){.device-deck{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.device-window{min-height:285px}
.device-slots{min-height:190px;padding:7px}
.device-slot{min-height:160px}
.device-slot-sprite{top:45px;width:48px;height:48px;background-size:576px 48px}
.device-window h2{font-size:9px}
.device-menu{display:none}}
.device-slot-sprite{background-size:768px 64px}
@keyframes cloud-slot-walk{to{background-position:-128px 0}}
@media(max-width:780px){.device-slot-sprite{background-size:576px 48px;animation:cloud-slot-walk-mobile 1s steps(2) infinite,pet-one-roam 7s steps(1) infinite}
.device-slot:nth-child(2) .device-slot-sprite{animation:cloud-slot-walk-mobile 1s steps(2) infinite,pet-two-roam 8s steps(1) infinite}
@keyframes cloud-slot-walk-mobile{to{background-position:-96px 0}}}
.device-window{box-sizing:border-box;aspect-ratio:1.18/1;min-height:0;padding:0}
.device-window h2{top:4.5%;left:4%;font-size:clamp(10px,1.1vw,14px)}
.device-slots{position:absolute;box-sizing:border-box;left:7%;top:17%;width:76%;height:66%;min-height:0;margin:0;padding:2.5%;border-width:clamp(5px,.9vw,9px);border-radius:clamp(7px,1vw,12px)}
.device-slot{min-height:0}
.device-slot-sprite{top:42%;width:clamp(48px,7vw,72px);height:clamp(48px,7vw,72px);background-size:calc(clamp(48px,7vw,72px) * 12) clamp(48px,7vw,72px)}
.physical-controls{right:3.6%;top:20%;height:54%;gap:0;justify-content:space-between}
.physical-controls button{width:clamp(17px,3.2vw,30px);height:clamp(17px,3.2vw,30px)}
.shell-menu{right:3.2%;bottom:3.3%;font-size:clamp(8px,1vw,12px)}
.device-menu{left:11%;right:17%;bottom:9%;font-size:clamp(8px,1vw,12px)}
.device-slot-sprite{background-size:1200% 100%;animation:device-walk-proportional 1s steps(2) infinite,pet-one-roam 7s steps(1) infinite}
.device-slot:nth-child(2) .device-slot-sprite{animation:device-walk-proportional 1s steps(2) infinite,pet-two-roam 8s steps(1) infinite}
@keyframes device-walk-proportional{to{background-position:-200% 0}}
.device-window{aspect-ratio:1.62/1!important;min-height:0!important}
.device-slots{left:11.5%!important;top:23%!important;width:65%!important;height:55%!important}
.physical-controls{right:4.7%!important;top:21%!important;height:58%!important}
.physical-controls button{width:clamp(30px,6.7vw,58px)!important;height:clamp(30px,6.7vw,58px)!important}
.device-slot-sprite{background-size:1200% 100%!important;background-position:0 0!important;animation:device-walk-stable 800ms steps(1,end) infinite,pet-one-roam 7s steps(1,end) infinite!important}
.device-slot:nth-child(2) .device-slot-sprite{animation:device-walk-stable 800ms steps(1,end) infinite,pet-two-roam 8s steps(1,end) infinite!important}
@keyframes device-walk-stable{0%,49%{background-position:0 0}50%,100%{background-position:calc(-100% / 11) 0}}
@media(max-width:780px){.device-window{aspect-ratio:1.52/1!important}
.device-slots{left:10%!important;top:22%!important;width:68%!important;height:57%!important}
.physical-controls{right:3.5%!important;top:20%!important;height:60%!important}
.physical-controls button{width:clamp(26px,8.5vw,42px)!important;height:clamp(26px,8.5vw,42px)!important}}
.device-window[data-shell="classic"]{background:transparent url('/assets/vault/shells/classic-shell-v1.png') center/contain no-repeat!important;border:0!important;box-shadow:none!important}
.device-window[data-shell="classic"] h2{display:none}
.device-window[data-shell="classic"] .device-slots{left:19.9%!important;top:27.8%!important;width:56.7%!important;height:42.1%!important;padding:0!important;border:0!important;border-radius:0!important;background:linear-gradient(#57caec,#bdebf7 54%,#70c95e 55%,#baf08b)!important}
.device-window[data-shell="classic"] .physical-controls{z-index:5;left:81.2%!important;right:auto!important;top:25.5%!important;width:11.5%!important;height:44.5%!important}
.device-window[data-shell="classic"] .physical-controls button{width:100%!important;height:25%!important;border:0!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important;outline:0!important}
.device-window[data-shell="classic"] .physical-controls button:focus-visible{outline:2px solid #9fd65c!important;outline-offset:3px!important}
.device-window[data-shell="classic"] .shell-menu{z-index:6;right:9%!important;bottom:9%!important}
.device-window[data-shell="classic"] .device-menu{z-index:7;left:21%!important;right:25%!important;bottom:31%!important;border-width:1px!important}
@media(max-width:780px){.device-window[data-shell="classic"]{aspect-ratio:1.614/1!important}
.device-window[data-shell="classic"] .device-slots{left:19.9%!important;top:27.8%!important;width:56.7%!important;height:42.1%!important}
.device-window[data-shell="classic"] .physical-controls{left:81.2%!important;top:25.5%!important;width:11.5%!important;height:44.5%!important}}