@font-face{font-family:Rubik;src:url(assets/Rubik-Black.ttf?v=1791832878);font-weight:900}
@font-face{font-family:Figtree;src:url(assets/Figtree-Bold.ttf?v=1791832878);font-weight:700}
@font-face{font-family:Figtree;src:url(assets/Figtree-ExtraBold.ttf?v=1791832878);font-weight:800}
@font-face{font-family:Figtree;src:url(assets/Figtree-Black.ttf?v=1791832878);font-weight:900}
:root{--cream:#f3ead8;--paper:#efe4cf;--ink:#1f1d2b;--pink:#FF87A6;--pinkd:#e8668a;--denim:#2f4fa2;--sage:#8aa36b;--mut:#6d6758}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--ink);font-family:Figtree,system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.hidden{display:none!important}
.screen{position:fixed;inset:0;display:none;overflow:hidden}
.screen.active{display:block}
.paper{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0%,#f8f1e3 0%,var(--cream) 55%,#e6d8bd 100%)}
.paper::after,.grain{content:"";position:absolute;inset:-50%;pointer-events:none;opacity:.14;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.8em 1.4em;border-radius:999px;font-weight:800;letter-spacing:.01em;transition:transform .15s,box-shadow .15s,background .15s}
.btn.pink{background:var(--pink);color:var(--ink);box-shadow:0 4px 0 var(--pinkd)}
.btn.pink:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--pinkd)}
.btn.pink:active{transform:translateY(2px);box-shadow:0 2px 0 var(--pinkd)}
.btn.pink:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn.ghost{background:rgba(31,29,43,.06);border:2px solid rgba(31,29,43,.15)}
.btn.ghost:hover{background:rgba(31,29,43,.12)}
.btn.big{font-size:1.15rem;padding:1em 1.8em}
.btn.full{width:100%}
.muted{color:var(--mut)}
.step{font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pinkd);margin-bottom:.6rem}
h1,h2{font-family:Rubik,Figtree,sans-serif;font-weight:900;letter-spacing:-.01em}
/* gate */
.gate-inner{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;padding:2rem}
.gate-logo{width:84px;animation:bob 2.4s ease-in-out infinite}
.gate-title{font-size:clamp(3rem,9vw,7rem);line-height:.9}
.gate-sub{font-weight:700;color:var(--mut);margin-bottom:1rem}
.hint{font-size:.85rem;color:var(--mut)}
@keyframes bob{50%{transform:translateY(-8px) rotate(-3deg)}}
/* cinematic */
#cine{background:#0e0d14}
#cam{position:absolute;inset:0;transform-origin:50% 60%}
#sky{position:absolute;inset:0;background:linear-gradient(#9fb8c9,#f2dcc4)}
#world{position:absolute;left:50%;top:50%;width:max(100vw,236vh);height:auto;min-height:100vh;object-fit:cover;transform:translate(-50%,-50%)}
#towerGlow{position:absolute;left:58.5%;top:18%;width:16vh;height:16vh;border-radius:50%;background:radial-gradient(circle,rgba(255,135,166,.9),rgba(255,135,166,0) 70%);opacity:0;mix-blend-mode:screen}
#clouds{position:absolute;inset:0;pointer-events:none}
.cloud{position:absolute;opacity:.9;filter:drop-shadow(0 6px 0 rgba(170,150,130,.18))}
.actor{position:absolute;will-change:transform}
#plane{top:21vh;left:0;display:flex;align-items:center;flex-direction:row-reverse;gap:0}
#plane img{width:22vh}
#plane .banner{background:var(--pink);font-family:Rubik;font-weight:900;font-size:1.7vh;padding:.7vh 1.6vh;white-space:nowrap;letter-spacing:.06em;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,4% 50%);margin-right:4vh;position:relative}
#plane .banner::after{content:"";position:absolute;right:-4vh;top:50%;width:4vh;border-top:1px solid #6b5a4a}
#eagle{width:30vh;top:20vh;left:0;z-index:6}
#cast{position:absolute;inset:0}
.hero{position:absolute;bottom:11vh;height:42vh;transform-origin:50% 100%;opacity:0}
.hero img{height:100%;display:block;filter:drop-shadow(0 1.2vh 0 rgba(40,30,20,.18))}
.hero::before{content:"";position:absolute;left:10%;right:10%;bottom:-1.4vh;height:3vh;border-radius:50%;background:rgba(40,50,20,.28);filter:blur(4px);z-index:-1}
#h-deek{left:50%;height:44vh;z-index:3}
#h-nitin{left:35%;height:45vh;z-index:2}
#h-ali{left:65%;height:44vh;z-index:2}
#h-ghost{left:19%;height:42vh;z-index:1}
#h-hrushi{left:81%;height:32vh;z-index:1}
.pet{bottom:9.5vh;height:10vh;z-index:4}
#dog{height:11vh}
.bar{position:absolute;left:0;right:0;height:9vh;background:#0e0d14;z-index:20}
.bar.top{top:0}.bar.bottom{bottom:0}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(20,15,25,.45));z-index:15}
#cine .grain{z-index:16;opacity:.18}
#caption{position:absolute;left:0;right:0;top:12vh;z-index:21;text-align:center;font-family:Rubik;font-weight:900;color:#fff;font-size:clamp(1.3rem,3.6vh,2.6rem);text-shadow:0 2px 0 rgba(0,0,0,.25),0 0 30px rgba(0,0,0,.25);padding:0 6vw;line-height:1.2}
#caption .w{display:inline-block;opacity:0;transform:translateY(.6em)}
#titleCard{position:absolute;inset:0;z-index:22;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5vh;background:var(--cream);opacity:0;pointer-events:none}
#titleCard::after{content:"";position:absolute;inset:0;opacity:.18;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,")}
#titleCard img{width:13vh}
#titleCard h1{font-size:15vh;line-height:.85}
#titleCard p{font-weight:800;font-size:2.6vh;color:var(--mut)}
#flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:30;pointer-events:none}
#skipBtn{position:absolute;right:2.5vw;bottom:2.4vh;z-index:40;color:#fff;font-weight:800;opacity:.7;padding:.5em 1em;border-radius:99px;border:1.5px solid rgba(255,255,255,.4)}
#skipBtn:hover{opacity:1}
/* wipe */
.wipe{position:fixed;inset:0;z-index:100;background:var(--pink);pointer-events:none;clip-path:circle(0% at 50% 50%)}
.wipe img{position:absolute;left:50%;top:50%;width:120px;transform:translate(-50%,-50%)}
/* name */
.card{position:relative;background:#fffaf0;border-radius:28px;box-shadow:0 2px 0 rgba(0,0,0,.05),0 30px 60px -20px rgba(70,50,20,.35);padding:2.6rem}
.name-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,92vw)}
.name-card h2{font-size:2.2rem;line-height:1.05;margin-bottom:.6rem}
.name-card .muted{margin-bottom:1.6rem}
.field{display:flex;align-items:center;gap:.3rem;border:2.5px solid var(--ink);border-radius:16px;padding:0 1rem;background:#fff;font-size:1.4rem;font-weight:800;margin-bottom:.6rem}
.field span{color:var(--pinkd)}
.field input{flex:1;border:0;outline:0;font:inherit;padding:.8rem 0;background:none;min-width:0}
.field:focus-within{box-shadow:0 0 0 5px rgba(255,135,166,.35)}
.err{min-height:1.3em;color:#c23a5c;font-weight:700;font-size:.9rem;margin-bottom:.8rem}
.peek{position:absolute;right:max(2vw,calc(50% - 470px));bottom:-6vh;height:46vh;transform:rotate(-6deg);pointer-events:none}
/* choose */
.choose-wrap{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}
.choose-wrap h2{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:2rem;max-width:900px}
.who{color:var(--pinkd)}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,380px));gap:1.6rem}
.choice{background:#fffaf0;border-radius:28px;padding:1.4rem 1.4rem 1.8rem;text-align:left;box-shadow:0 30px 60px -25px rgba(70,50,20,.4);border:3px solid transparent;transition:transform .25s,border-color .25s}
.choice:hover{transform:translateY(-8px) rotate(-.6deg);border-color:var(--pink)}
.choice h3{font-family:Rubik;font-weight:900;font-size:1.6rem;margin:1rem 0 .4rem}
.choice h3 em{font-style:normal;font-family:Figtree;font-size:.75rem;background:var(--pink);padding:.2em .7em;border-radius:99px;vertical-align:middle;margin-left:.3em;letter-spacing:.06em;text-transform:uppercase}
.choice p{color:var(--mut);font-weight:700}
.choice-art{height:260px;border-radius:20px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;position:relative}
.create-art{background:linear-gradient(#cfdbe4,#f0dcc6)}
.create-art img{height:88%;margin:0 -16px}
.create-art img:nth-child(2){height:96%;z-index:1}
.deek-art{background:linear-gradient(#d9cdfa,#f7d7e1)}
.deek-art img{height:94%}
/* studio */
.studio-wrap{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:2rem;padding:2rem 3vw;align-items:center;max-width:1200px;margin:0 auto}
.stage-col{display:flex;flex-direction:column;align-items:center;gap:1rem;height:100%;justify-content:center}
.stage{position:relative;height:min(76vh,720px);aspect-ratio:560/800;border-radius:28px;background:linear-gradient(#cfdbe4 0%,#f2dfc8 70%,#b9c48f 70%,#a6b27b 100%);box-shadow:0 30px 60px -25px rgba(70,50,20,.45);overflow:hidden}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.stage .nametag{position:absolute;top:3%;left:50%;transform:translateX(-50%);z-index:2}
.nametag{background:var(--ink);color:#fff;font-family:Rubik;font-weight:900;padding:.35em .9em;border-radius:10px;font-size:1rem;white-space:nowrap}
.nametag.big{font-size:1.3rem}
.stage-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.panel-col{background:#fffaf0;border-radius:28px;padding:1.6rem;box-shadow:0 30px 60px -25px rgba(70,50,20,.4);max-height:90vh;display:flex;flex-direction:column}
.panel-col h2{font-size:1.7rem;margin-bottom:1rem}
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.tab{padding:.45em .95em;border-radius:99px;font-weight:800;background:rgba(31,29,43,.06)}
.tab.on{background:var(--ink);color:#fff}
.opts{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;align-content:start;margin-bottom:1.2rem;min-height:200px;padding:2px}
.opt{border-radius:16px;background:#f3ead8;padding:.8rem .4rem;font-weight:800;font-size:.85rem;display:flex;flex-direction:column;align-items:center;gap:.35rem;border:2.5px solid transparent;transition:transform .15s}
.opt:hover{transform:translateY(-2px)}
.opt.on{border-color:var(--pinkd);background:#ffe3ea}
.opt .ic{font-size:1.6rem;line-height:1}
.sw{width:100%;aspect-ratio:1;border-radius:14px;border:3px solid transparent;box-shadow:inset 0 -6px 0 rgba(0,0,0,.12)}
.sw.on{border-color:var(--ink)}
.opts .lbl{grid-column:1/-1;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--mut);margin-top:.4rem}
.drop{position:absolute;inset:6%;border:3px dashed rgba(31,29,43,.35);border-radius:22px;display:flex;align-items:center;justify-content:center;background:rgba(255,250,240,.75);z-index:3;cursor:pointer}
.drop.over{background:#ffe3ea;border-color:var(--pinkd)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop-in{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;pointer-events:none}
.drop-in .up{width:64px;height:64px;border-radius:50%;background:var(--pink);display:grid;place-items:center;font-size:1.8rem;margin-bottom:.4rem}
.drop-in b{font-family:Rubik;font-size:1.3rem}
.drop-in span{color:var(--mut);font-weight:700;font-size:.9rem}
.forging{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:rgba(243,234,216,.85);z-index:4;font-weight:800}
.spin{width:54px;height:54px;border-radius:50%;border:6px solid rgba(31,29,43,.12);border-top-color:var(--pinkd);animation:sp 0.8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
/* ready */
#readyScr{background:#0e0d14}
.ready-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#readyScr .grain{opacity:.16}
.ready-inner{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:4vw;padding:0 4vw 6vh}
.ready-char{position:relative;height:62vh;display:flex;flex-direction:column;align-items:center}
.ready-char img{height:100%;filter:drop-shadow(0 1.5vh 0 rgba(40,30,20,.2));animation:bob 2.6s ease-in-out infinite}
.ready-char .nametag{position:absolute;top:-8vh}
.ready-card{background:#fffaf0;border-radius:28px;padding:2rem;max-width:460px;margin-bottom:10vh;box-shadow:0 30px 60px -20px rgba(0,0,0,.35)}
.ready-card h2{font-size:2.2rem;margin-bottom:.6rem}
.ready-card p{color:var(--mut);font-weight:700;margin-bottom:1.4rem}
.ready-card .row{display:flex;gap:.6rem;flex-wrap:wrap}
@media (max-width:860px){
.choices{grid-template-columns:1fr;max-width:420px;width:100%}
.choice-art{height:170px}
.choose-wrap{overflow:auto;justify-content:flex-start;padding-top:3rem}
.studio-wrap{grid-template-columns:1fr;overflow:auto;align-items:start;height:auto;min-height:100%}
#studio{overflow:auto}
.stage{height:56vh}
.panel-col{max-height:none}
.peek{display:none}
.ready-inner{flex-direction:column;align-items:center;justify-content:flex-end}
.ready-char{height:40vh}
.ready-card{margin-bottom:0}
}
#dim{position:absolute;inset:0;background:#0e0d14;z-index:14;pointer-events:none}
#closeup{position:absolute;inset:0;opacity:0;overflow:hidden;z-index:8;background:#cfd9d6}
.cu-bg{position:absolute;height:135vh;top:-22vh;left:0;max-width:none;filter:blur(6px) saturate(1.05);transform-origin:30% 50%}
.cu-walker{position:absolute;left:0;max-width:none;will-change:transform;filter:drop-shadow(0 2vh 2vh rgba(40,30,20,.25))}
.cu-fg{position:absolute;left:-10%;right:-10%;bottom:-8vh;height:24vh;background:linear-gradient(rgba(120,140,80,0),rgba(110,130,70,.9));filter:blur(14px)}
/* illustrated backgrounds */
.bgart{position:absolute;inset:-3%;background:url(assets/bg_menu.webp?v=1791832878) center/cover no-repeat;animation:kb 38s ease-in-out infinite alternate}
#studio .bgart{background-image:url(assets/bg_studio.webp?v=1791832878)}
.paper::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(70% 60% at 50% 50%,rgba(250,244,232,.55) 0%,rgba(250,244,232,.18) 60%,rgba(40,30,20,.18) 100%)}
#studio .paper::before{background:radial-gradient(80% 70% at 50% 45%,rgba(250,244,232,.10) 0%,rgba(40,30,20,.22) 100%)}
@keyframes kb{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.07) translate(-1.2%,-1%)}}
.stage{background:rgba(255,250,240,.35)!important;backdrop-filter:blur(2px);border:2px solid rgba(255,255,255,.55)}
#xoTrade{position:fixed;top:16px;left:16px;z-index:200;display:flex;align-items:center;gap:8px;padding:9px 14px 9px 10px;border-radius:999px;background:#1f1d2b;color:#fff;text-decoration:none;font:800 14px Figtree,sans-serif;box-shadow:0 8px 22px -8px rgba(0,0,0,.5);border:2px solid #FF87A6;transition:transform .2s,background .2s}
#xoTrade img{width:22px;height:22px}
#xoTrade b{color:#FF87A6}
#xoTrade:hover{transform:translateY(-2px) scale(1.04);background:#FF87A6;color:#1f1d2b}
#xoTrade:hover b{color:#1f1d2b}
body:has(#cine.active) #xoTrade{opacity:0;pointer-events:none}
/* contrast pass: keep UI above the background wash */
.paper{z-index:0;isolation:isolate}
.paper::before{background:radial-gradient(75% 65% at 50% 50%,rgba(250,244,232,.38) 0%,rgba(250,244,232,.08) 60%,rgba(30,22,16,.28) 100%)!important}
.gate-inner,.card,.choose-wrap,.studio-wrap,.peek{z-index:2}
.gate-title{color:#1f1d2b;text-shadow:0 3px 0 #fffaf0,0 0 2px #fffaf0,0 10px 28px rgba(31,29,43,.35)}
.gate-sub,.hint{color:#3b3646;background:rgba(255,250,240,.82);padding:.3em .9em;border-radius:99px;box-shadow:0 4px 14px -6px rgba(31,29,43,.35)}
.gate-logo{filter:drop-shadow(0 6px 10px rgba(31,29,43,.35))}
.card,.choice,.panel-col{background:#fffdf7;border:2px solid rgba(31,29,43,.14);box-shadow:0 2px 0 rgba(31,29,43,.08),0 30px 60px -18px rgba(31,29,43,.55)}
.choice:hover{border-color:var(--pink)}
.card h2,.choice h3,.panel-col h2{color:#1f1d2b}
.card .muted,.choice p{color:#4f4a5a}
.field{border-color:#1f1d2b!important}
.btn.pink{box-shadow:0 4px 0 var(--pinkd),0 10px 22px -10px rgba(31,29,43,.55)}
.peek{filter:drop-shadow(0 0 0 #fff) drop-shadow(3px 0 0 #fffaf0) drop-shadow(-3px 0 0 #fffaf0) drop-shadow(0 -3px 0 #fffaf0) drop-shadow(0 14px 18px rgba(31,29,43,.45)) saturate(1.12)}
.choose-wrap>.step,.choose-wrap>h2{background:rgba(255,253,247,.88);padding:.35rem 1rem;border-radius:16px;display:inline-block;box-shadow:0 8px 24px -12px rgba(31,29,43,.45)}
.stage{background:rgba(255,253,247,.7)!important;border:2px solid rgba(31,29,43,.14);box-shadow:0 30px 60px -20px rgba(31,29,43,.5)}
.btn.ghost{background:rgba(255,253,247,.85);border-color:rgba(31,29,43,.25)}
.ready-card{box-shadow:0 30px 60px -18px rgba(31,29,43,.55)}
/* ===== COMPANION PICKER ===== */
#petScr .bgart{background-image:url(assets/bg_studio.webp?v=1791832878)}
.pet-wrap{position:relative;height:100%;display:flex;flex-direction:column;padding:8vh 4vw 3vh;gap:2.2vh}
.pet-head{align-self:flex-start;background:rgba(255,250,240,.92);border-radius:22px;padding:1rem 1.4rem;box-shadow:0 20px 40px -24px rgba(70,50,20,.45)}
.pet-head h2{font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1}
.pet-head .muted{font-weight:700;margin-top:.4rem}
.pet-body{flex:1;min-height:0;display:grid;grid-template-columns:1.35fr 1fr;gap:3vw;align-items:stretch}
.pet-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:1.1rem;min-height:0}
.pet-card{position:relative;background:#fffaf0;border-radius:24px;border:3px solid transparent;box-shadow:0 22px 40px -22px rgba(70,50,20,.45);padding:.8rem .8rem 1rem;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.35rem;transition:transform .25s,border-color .2s,background .2s;overflow:hidden;min-height:0}
.pet-card::before{content:"";position:absolute;left:12%;right:12%;bottom:3.6rem;height:14px;border-radius:50%;background:rgba(60,40,20,.12)}
.pet-card:hover{transform:translateY(-6px) rotate(-.8deg);border-color:var(--pink)}
.pet-card.on{border-color:var(--pinkd);background:#ffe9ef;transform:translateY(-6px)}
.pet-card.on::after{content:"✓";position:absolute;top:.6rem;right:.7rem;width:28px;height:28px;border-radius:50%;background:var(--pinkd);color:#fff;font-weight:900;display:grid;place-items:center}
.pet-card .pimg{position:relative;flex:1;min-height:0;width:100%;display:flex;align-items:flex-end;justify-content:center}
.pet-card .pimg img{max-width:88%;max-height:100%;object-fit:contain;filter:drop-shadow(0 6px 0 rgba(40,30,20,.12))}
.pet-card b{font-family:Rubik;font-weight:900;font-size:1.15rem;position:relative}
.pet-card small{color:var(--mut);font-weight:700;font-size:.78rem;position:relative;text-align:center}
.pet-duo{background:rgba(255,250,240,.86);border-radius:28px;box-shadow:0 30px 60px -25px rgba(70,50,20,.45);display:flex;flex-direction:column;padding:1.2rem 1.4rem 1.4rem;min-height:0}
.duo-stage{position:relative;flex:1;min-height:0;border-radius:20px;overflow:hidden;background:linear-gradient(#cfe3d0 0%,#e9f0d8 62%,#b9cf8c 62%,#a8c27a 100%)}
.duo-stage .nametag{position:absolute;top:4%;left:34%;transform:translateX(-50%);z-index:3}
#duoMe{position:absolute;bottom:12%;left:34%;transform:translateX(-50%);height:74%;max-width:62%;object-fit:contain;animation:bob 2.6s ease-in-out infinite;transform-origin:50% 100%}
#duoPet{position:absolute;bottom:12%;left:74%;transform:translateX(-50%);max-height:32%;max-width:40%;object-fit:contain;opacity:0}
#duoPet.flyer{bottom:46%}
.duo-ground{position:absolute;left:0;right:0;bottom:0;height:12%;background:rgba(80,100,40,.18)}
.duo-name{display:flex;flex-direction:column;align-items:center;margin:.9rem 0 .8rem;text-align:center}
.duo-name b{font-family:Rubik;font-weight:900;font-size:1.5rem}
.duo-name span{color:var(--mut);font-weight:700}
.duo-actions{display:flex;gap:.6rem;justify-content:space-between;align-items:center}
@media (max-width:900px){.pet-wrap{overflow:auto}.pet-body{grid-template-columns:1fr}.pet-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}.pet-duo{min-height:420px}}
/* ===== ENTERING ===== */
#enterScr{background:#0e0d14}
#enterCam{position:absolute;inset:0;transform-origin:78% 62%}
.enter-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#portalGlow{position:absolute;left:84%;top:55%;width:34vh;height:44vh;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,240,255,.85),rgba(255,150,210,.35) 45%,transparent 70%);mix-blend-mode:screen;opacity:.5;pointer-events:none}
#walkers{position:absolute;inset:0;pointer-events:none}
.walker{position:absolute;left:0;bottom:0;transform-origin:50% 100%;will-change:transform}
.walker.me img{height:46vh;display:block;filter:drop-shadow(0 1.2vh 0 rgba(40,30,20,.18))}
.walker.pet img{height:15vh;display:block;filter:drop-shadow(0 .8vh 0 rgba(40,30,20,.15))}
#motes{position:absolute;inset:0;pointer-events:none}
#motes i{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff6d8;box-shadow:0 0 10px 3px rgba(255,220,240,.8)}
#enterScr .grain{z-index:16;opacity:.18}
#enterCap{position:absolute;left:0;right:0;top:13vh;z-index:21;text-align:center;font-family:Rubik;font-weight:900;color:#fff;font-size:3.4vh;text-shadow:0 3px 20px rgba(0,0,0,.45);opacity:0;letter-spacing:.01em}
#slowTag{position:absolute;top:11vh;right:3vw;z-index:21;color:#fff;font-weight:900;letter-spacing:.3em;font-size:1.5vh;display:flex;align-items:center;gap:.6em;opacity:0}
#slowTag i{width:9px;height:9px;border-radius:50%;background:#ff4d6d;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
#portalFlash{position:absolute;inset:0;z-index:30;background:radial-gradient(circle at 84% 55%,#fff 0%,#ffe1f0 40%,#ffc7df 100%);opacity:0;pointer-events:none}
/* ===== LOADING ===== */
#loadScr{background:#ffc7df}
.load-sky{position:absolute;inset:0;background:linear-gradient(#ffd3e3 0%,#ffe7cf 55%,#f6ead6 100%)}
.load-hills{position:absolute;left:0;width:300%;bottom:24vh;background-repeat:repeat-x;background-position:0 100%}
.load-hills.h1{height:30vh;opacity:.55;background-image:radial-gradient(60vh 30vh at 30vh 30vh,#b9cf8c 98%,transparent 100%);background-size:60vh 30vh;animation:scroll 40s linear infinite}
.load-hills.h2{height:20vh;bottom:22vh;background-image:radial-gradient(40vh 20vh at 20vh 20vh,#98b56c 98%,transparent 100%);background-size:46vh 20vh;animation:scroll 18s linear infinite}
@keyframes scroll{to{transform:translateX(-33.333%)}}
.load-center{position:absolute;left:0;right:0;top:10vh;display:flex;flex-direction:column;align-items:center;gap:2vh;z-index:3}
.load-logo{position:relative;width:16vh;height:16vh;display:grid;place-items:center}
.load-logo img{width:62%;position:relative;z-index:2;filter:drop-shadow(0 6px 0 rgba(31,29,43,.15))}
.load-logo .ring{position:absolute;inset:0;border-radius:50%;border:5px solid transparent}
.load-logo .r1{border-top-color:var(--ink);border-right-color:var(--ink);animation:sp 1.6s linear infinite}
.load-logo .r2{inset:12%;border-bottom-color:var(--pinkd);border-left-color:var(--pinkd);animation:sp 1.1s linear infinite reverse}
.load-title{font-size:clamp(2.6rem,8vh,5rem);color:var(--ink);display:flex;letter-spacing:.02em;line-height:1}
.load-title span{display:inline-block}
.track{position:absolute;left:0;right:0;bottom:22vh;height:26vh;z-index:4}
.track-ground{position:absolute;left:0;right:0;bottom:0;height:3px;background:repeating-linear-gradient(90deg,var(--ink) 0 26px,transparent 26px 44px);opacity:.35;animation:dash .5s linear infinite}
@keyframes dash{to{background-position:-44px 0}}
.runner{position:absolute;bottom:0;left:0;height:100%;transform-origin:50% 100%}
.runner img{height:100%;display:block}
.dust{position:absolute;left:-10%;bottom:0;width:30%;height:12%;border-radius:50%;background:rgba(120,90,60,.18);filter:blur(4px)}
.runpet{position:absolute;bottom:0;left:0;height:9vh}
.runpet.flyer{bottom:13vh}
.load-foot{position:absolute;left:50%;transform:translateX(-50%);bottom:5vh;width:min(560px,86vw);z-index:5;text-align:center}
.load-tip{font-weight:800;color:var(--ink);margin-bottom:1rem;min-height:1.4em}
.load-bar{position:relative;height:22px;border-radius:99px;background:rgba(31,29,43,.12);border:3px solid var(--ink);overflow:hidden}
.load-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:repeating-linear-gradient(-45deg,var(--pink) 0 14px,#ff9fb8 14px 28px);animation:barber 1s linear infinite}
@keyframes barber{to{background-position:40px 0}}
.load-bar b{position:absolute;inset:0;display:grid;place-items:center;font-size:.8rem;font-weight:900}
.load-done{margin-top:1rem;background:#fffaf0;border-radius:20px;padding:1rem 1.2rem;box-shadow:0 20px 40px -20px rgba(70,50,20,.4)}
.load-done p{font-weight:700;color:var(--mut);margin-bottom:.8rem}.load-done p b{color:var(--ink)}
.load-done .row{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
#loadScr .grain{opacity:.12;z-index:6}
/* ===== OPEN WORLD HUD ===== */
#worldScr{background:#ffe2cf}
#worldCanvas,#worldCanvas canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
body:has(#worldScr.active) #xoTrade{top:auto;left:auto;bottom:18px;right:18px}
#wMapWrap{position:absolute;top:16px;left:16px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:6px}
#wMap{width:190px;height:190px;border-radius:50%;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);background:#5fbecd}
#wBiome{background:#1f1d2b;color:#fff;font:900 13px Rubik,sans-serif;padding:5px 12px;border-radius:99px;letter-spacing:.02em}
.w-mapbtns{position:absolute;right:-6px;top:-4px;display:flex;flex-direction:column;gap:6px}
.w-mapbtns button{width:34px;height:34px;border-radius:50%;background:#fffaf0;border:2.5px solid #1f1d2b;font:900 15px Rubik;display:grid;place-items:center;box-shadow:0 4px 0 #1f1d2b}
#wMapWrap.big{inset:0;top:0;left:0;justify-content:center;background:rgba(20,15,25,.6);backdrop-filter:blur(3px)}
#wMapWrap.big #wMap{width:min(80vh,86vw);height:min(80vh,86vw);border-radius:24px;border:5px solid #1f1d2b}
#wMapWrap.big .w-mapbtns{right:auto;top:auto;position:static;flex-direction:row}
#wPlayer{position:absolute;top:16px;right:16px;z-index:5;display:flex;align-items:center;gap:10px;background:rgba(255,250,240,.94);border:3px solid #1f1d2b;border-radius:18px;padding:6px 14px 6px 6px;box-shadow:0 5px 0 #1f1d2b}
#wPlayer img{width:46px;height:46px;object-fit:contain;background:#ffe3ea;border-radius:12px}
#wPlayer b{display:block;font:900 17px Rubik,sans-serif}
#wPlayer span{font:800 13px Figtree,sans-serif;color:#6d6758}#wPlayer i{font-style:normal}#wPlayer em{font-style:normal;color:#1f1d2b;font-weight:900}
#wQuest{position:absolute;top:92px;right:16px;z-index:5;width:270px;background:rgba(31,29,43,.86);color:#fff;border-radius:16px;padding:10px 12px;font:700 13px Figtree,sans-serif}
.q-h{font:900 11px Figtree;letter-spacing:.12em;text-transform:uppercase;color:#FF87A6;margin-bottom:6px}
.q-r{display:flex;align-items:center;gap:8px;padding:3px 0}.q-r span{flex:1}.q-r b{font-family:Rubik}.q-r i{width:16px;height:16px;border-radius:5px;border:2px solid #FF87A6;display:grid;place-items:center;font-size:11px;font-style:normal}
.q-r.done{opacity:.6}.q-r.done span{text-decoration:line-through}.q-r.done i{background:#FF87A6;color:#1f1d2b}
#wPrompt{position:absolute;left:50%;bottom:118px;transform:translate(-50%,20px);z-index:5;background:#fffaf0;border:3px solid #1f1d2b;border-radius:14px;padding:9px 16px;font:900 16px Rubik,sans-serif;opacity:0;transition:.2s;pointer-events:none;box-shadow:0 5px 0 #1f1d2b}
#wPrompt.on{opacity:1;transform:translate(-50%,0)}
#wPrompt b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#FF87A6;margin-right:8px}
#wHotbar{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:5;display:flex;gap:6px;background:rgba(31,29,43,.82);padding:7px;border-radius:16px}
.hb{position:relative;width:54px;height:54px;border-radius:12px;background:rgba(255,250,240,.12);border:2.5px solid transparent;font-size:26px;display:grid;place-items:center}
.hb.on{border-color:#FF87A6;background:rgba(255,135,166,.25)}.hb.lock{opacity:.35}
.hb em{position:absolute;top:2px;left:5px;font:900 10px Figtree;color:#fff;font-style:normal;opacity:.7}
.hb-name{position:absolute;top:-28px;left:50%;transform:translateX(-50%);background:#1f1d2b;color:#fff;font:800 12px Figtree;padding:3px 10px;border-radius:99px;white-space:nowrap}
#wToasts{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:8;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.w-toast{background:#fffaf0;border:3px solid #1f1d2b;border-radius:14px;padding:9px 16px;font:700 15px Figtree,sans-serif;box-shadow:0 5px 0 #1f1d2b;opacity:0;transform:translateY(-14px);transition:.35s;max-width:min(560px,80vw);text-align:center}
.w-toast.in{opacity:1;transform:none}
.w-modal{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;background:rgba(20,15,25,.45);backdrop-filter:blur(2px)}
.w-modal.on{display:flex}
.w-card{position:relative;width:min(520px,92vw);max-height:88vh;overflow:auto;background:#fffaf0;border:4px solid #1f1d2b;border-radius:24px;padding:22px;box-shadow:0 8px 0 #1f1d2b;animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.8);opacity:0}}
#wModalX{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:#1f1d2b;color:#fff;font-weight:900}
.mk-cat{font:900 11px Figtree;letter-spacing:.14em;color:#e8668a;text-transform:uppercase;margin-bottom:4px}
.w-card h3{font:900 22px/1.15 Rubik,sans-serif;margin-bottom:10px;padding-right:30px}.w-card h3 small{font:800 13px Figtree;color:#6d6758;margin-left:6px}
.mk-top{display:flex;gap:14px;align-items:flex-start;margin-bottom:6px}.mk-top img{width:74px;height:74px;border-radius:14px;object-fit:cover;flex:none;border:3px solid #1f1d2b}
.mk-vol{font:800 13px Figtree;color:#6d6758}
.mk-o{position:relative;height:38px;border-radius:12px;background:rgba(31,29,43,.07);margin:8px 0;overflow:hidden;display:flex;align-items:center;padding:0 12px;font:800 15px Figtree}
.mk-o i{position:absolute;left:0;top:0;bottom:0;border-radius:12px}.mk-o i.y{background:#9df2b4}.mk-o i.n{background:#ffc2cf}
.mk-o span,.mk-o b{position:relative}.mk-o span{flex:1}.mk-o b{font-family:Rubik}
.mk-pitch{background:#1f1d2b;color:#fff;border-radius:14px;padding:12px 14px;margin:12px 0 14px;font:700 14px Figtree}.mk-pitch b{color:#FF87A6;font-size:12px;letter-spacing:.1em;text-transform:uppercase}.mk-pitch p{margin-top:4px}
.mk-fine{font:700 12px Figtree;color:#6d6758;text-align:center;margin-top:8px}
.lp-row{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:12px;background:rgba(31,29,43,.06);margin:6px 0;color:#1f1d2b;text-decoration:none;font:700 14px Figtree}.lp-row:hover{background:#ffe3ea}.lp-row b{white-space:nowrap;font-family:Rubik;color:#e8668a}
.lp .btn,.tr .btn.full{margin-top:10px}.lp .muted{margin-bottom:8px;font-weight:700}
.tr-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;background:rgba(31,29,43,.06);margin:8px 0}.tr-row>div:nth-child(2){flex:1}.tr-row b{display:block;font:900 16px Rubik}.tr-row span{font:700 13px Figtree;color:#6d6758}.tr-ic{font-size:30px}
.tr .muted{font-weight:700}.help p{font:700 14px Figtree;margin:7px 0}.help b{background:#ffe3ea;padding:1px 6px;border-radius:6px}
#wJoy{position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(255,250,240,.25);border:3px solid rgba(255,250,240,.6);z-index:6;display:none;pointer-events:none}
#wJoy.on{display:block}#wJoy i{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:#fffaf0;border:3px solid #1f1d2b}
.w-touch{display:none;position:absolute;z-index:6;width:62px;height:62px;border-radius:50%;background:#fffaf0;border:3px solid #1f1d2b;font:900 22px Rubik;box-shadow:0 4px 0 #1f1d2b}
#wJump{right:18px;bottom:110px}#wUse{right:92px;bottom:96px;background:#FF87A6}
@media (pointer:coarse){.w-touch{display:grid;place-items:center}#wQuest{display:none}#wHotbar .hb{width:44px;height:44px;font-size:21px}}
@media (max-width:760px){#wMap{width:130px;height:130px}#wQuest{display:none}}
#wMapWrap.big #wBiome{display:none}
/* ===== world HUD v2 ===== */
#wPlayer{padding-right:8px}#wMenuBtn{width:38px;height:38px;border-radius:12px;background:#1f1d2b;color:#fff;font:900 18px Rubik;margin-left:6px}
#wHearts{display:flex;gap:2px;margin:1px 0 2px}#wHearts i{font-style:normal;font-size:14px;color:rgba(31,29,43,.18);transition:.2s}#wHearts i.on{color:#ff4d6d;text-shadow:0 1px 0 #1f1d2b}
#wQuest{top:104px}
#wHurt{position:absolute;inset:0;pointer-events:none;z-index:4;box-shadow:inset 0 0 160px 40px rgba(255,40,80,.0);transition:box-shadow .25s}#wHurt.on{box-shadow:inset 0 0 160px 40px rgba(255,40,80,.55)}
.hb i{position:absolute;bottom:2px;right:5px;font:900 11px Rubik;font-style:normal;color:#fff;background:#1f1d2b;border-radius:6px;padding:0 4px}
#wMenu .w-card{width:min(440px,92vw)}#wMenuBody h3{font:900 26px Rubik;margin-bottom:6px}#wMenuBody .btn{margin-top:9px}#wMenuBody .muted{font:700 13px Figtree;color:#6d6758}
.sv-row,.st-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(31,29,43,.06);margin:8px 0}.sv-row b{display:block;font:900 16px Rubik}.sv-row span{font:700 12px Figtree;color:#6d6758}.sv-row .btn{margin:0!important}
.st-row span{font:800 14px Figtree}.st-row .btn{margin:0!important;min-width:70px}.st-seg{display:flex;background:#fff;border:3px solid #1f1d2b;border-radius:12px;overflow:hidden}.st-seg button{padding:6px 10px;font:800 12px Figtree;background:none}.st-seg button.on{background:#FF87A6}
#stVol{accent-color:#FF87A6;width:150px}
.mk-o i.c0{background:#7ee8a0}.mk-o i.c1{background:#ffadc0}.mk-o i.c2{background:#c9b6ff}.mk-o i.c3{background:#ffe08a}
.mk-ic{width:74px;height:74px;border-radius:14px;border:3px solid #1f1d2b;display:grid;place-items:center;font-size:36px;background:#ffe3ea;flex:none}
.lp-row em{font-style:normal}
.hb{width:50px;height:50px}
@media (pointer:coarse){#dlgImg{width:100px;height:140px}}
/* ---- cinematic dialogue ---- */
#wLetter{position:absolute;inset:0;pointer-events:none;z-index:19}
#wLetter i{position:absolute;left:0;right:0;height:0;background:#07060c;transition:height .7s cubic-bezier(.6,0,.2,1)}
#wLetter i:first-child{top:0}#wLetter i:last-child{bottom:0}
#worldScr.cine #wLetter i{height:11vh}
#worldScr.cine #wMapWrap,#worldScr.cine #wPlayer,#worldScr.cine #wQuest,#worldScr.cine #wHotbar,#worldScr.cine #wPrompt,#worldScr.cine #wClock,#worldScr.cine .w-touch{opacity:0;pointer-events:none;transition:opacity .4s}
#worldScr.cine #worldCanvas{filter:saturate(1.06) contrast(1.04)}
#wDialog{position:absolute;inset:0;z-index:21;pointer-events:none;opacity:0;transition:opacity .5s}
#wDialog.on{opacity:1}
#wDialog .dlg-sub{position:absolute;left:50%;bottom:calc(11vh + 18px);transform:translate(-50%,16px);width:min(980px,90vw);text-align:center;transition:transform .6s cubic-bezier(.2,.9,.3,1)}
#wDialog.on .dlg-sub{transform:translate(-50%,0)}
.dlg-h{display:flex;justify-content:center;align-items:baseline;gap:10px;margin-bottom:8px}
.dlg-h b{font:900 15px Rubik,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#FF87A6;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.dlg-h span{font:700 12px Figtree,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65)}
#dlgText{pointer-events:auto;cursor:pointer;margin:0;font:700 clamp(18px,2.2vw,27px)/1.38 Figtree,sans-serif;color:#fff;text-shadow:0 2px 3px rgba(0,0,0,.85),0 0 22px rgba(0,0,0,.55);min-height:2.8em}
#dlgChoices{position:absolute;right:clamp(16px,4vw,64px);top:50%;transform:translate(24px,-50%);display:flex;flex-direction:column;gap:8px;width:min(380px,40vw);opacity:0;transition:opacity .45s,transform .45s cubic-bezier(.2,.9,.3,1);pointer-events:none}
#dlgChoices.on{opacity:1;transform:translate(0,-50%);pointer-events:auto}
#dlgChoices button{display:flex;align-items:center;gap:12px;text-align:left;font:800 15px Figtree,sans-serif;color:#fff;background:linear-gradient(90deg,rgba(20,18,30,.82),rgba(20,18,30,.55));border:1px solid rgba(255,255,255,.14);border-left:3px solid #FF87A6;border-radius:12px;padding:12px 16px;cursor:pointer;backdrop-filter:blur(6px);transition:transform .15s,background .15s}
#dlgChoices button:hover{transform:translateX(-6px);background:linear-gradient(90deg,rgba(255,135,166,.9),rgba(255,135,166,.55));color:#1f1d2b}
#dlgChoices button em{font:900 12px Rubik,sans-serif;font-style:normal;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;background:rgba(255,255,255,.14)}
#dlgX{pointer-events:auto;position:absolute;top:calc(11vh + 14px);right:18px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(20,18,30,.6);color:#fff;font:900 16px Figtree;cursor:pointer}
@media (max-width:760px){#dlgChoices{position:absolute;left:50%;right:auto;top:auto;bottom:calc(11vh + 120px);transform:translate(-50%,16px);width:90vw}#dlgChoices.on{transform:translate(-50%,0)}#wDialog .dlg-sub{bottom:calc(11vh + 8px)}}
/* ---- clock, flight HUD, fade ---- */
#wClock{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:12;font:900 15px Rubik,sans-serif;color:#1f1d2b;background:#fffaf0;border:3px solid #1f1d2b;border-radius:14px;padding:6px 14px;box-shadow:0 4px 0 #1f1d2b;cursor:pointer}
#wFlight{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);z-index:12;display:none;gap:10px;align-items:stretch}
#wFlight.on{display:flex}
#wFlight>div{background:rgba(20,18,30,.78);color:#fff;border:2px solid rgba(255,255,255,.2);border-radius:14px;padding:8px 14px;text-align:center;min-width:86px}
#wFlight b{display:block;font:900 26px Rubik,sans-serif;color:#FF87A6}#wFlight span{font:800 11px Figtree;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
#wFlight .thr{position:relative;min-width:34px;padding:6px;display:flex;flex-direction:column;justify-content:flex-end}#wFlight .thr i{display:block;width:100%;background:linear-gradient(#ffd34d,#ff87a6);border-radius:6px;min-height:2px}#wFlight .thr span{margin-top:4px;font-size:9px}
#wFlight em{position:absolute;left:50%;top:-34px;transform:translateX(-50%);white-space:nowrap;font:800 13px Figtree;color:#fff;background:rgba(255,135,166,.9);padding:4px 10px;border-radius:10px;font-style:normal}
#wFade{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:40;transition:opacity .4s}
#wFade.on{opacity:1}
/* XO market terminal panel (dark XO trade card) */
.w-card:has(.xm){background:#101114;color:#f4f4f6;border-color:#ff7aa8;box-shadow:0 8px 0 #ff7aa8,0 0 60px rgba(255,122,168,.25)}
.w-card:has(.xm) #wModalX{background:#2a2b31;color:#fff}
.xm h3{color:#fff}.xm .mk-cat{color:#ff7aa8}.xm .mk-vol{color:#9a9aa6}.xm .mk-top img,.xm .mk-ic{border-color:#2a2b31;background:#1b1c21}
.xm-head{display:flex;align-items:baseline;gap:10px;margin:8px 0 2px}.xm-head b{font:900 46px/1 Rubik,sans-serif;color:#ff7aa8}.xm-head span{font:800 16px Figtree;color:#c9c9d2}
.xm-chart{background:#16171c;border:1px solid #24252c;border-radius:16px;padding:8px 8px 6px;margin:8px 0}.xm-chart canvas{width:100%;height:120px;display:block}
.xm-tf{display:flex;gap:4px;margin-top:4px}.xm-tf button{flex:1;background:none;border:0;border-radius:8px;padding:5px 0;font:800 12px Figtree;color:#8a8a96;cursor:pointer}.xm-tf button.on{background:#2a2b31;color:#fff}
.xm-legs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0}.xm-legs div{display:flex;justify-content:space-between;gap:6px;background:#1b1c21;border-radius:10px;padding:7px 10px;font:700 13px Figtree}.xm-legs b{font-family:Rubik;color:#ff7aa8}
.xm-sub{font:700 13px Figtree;color:#9a9aa6;margin:4px 0}.xm-sub b{color:#fff}
.xm-side{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 8px}.xm-side button{border-radius:14px;padding:12px 8px;font:800 16px Figtree;cursor:pointer;border:2px solid transparent;background:#1b1c21;color:#c9c9d2}
.xm-side button b{font-family:Rubik;margin-left:4px}.xm-side button.y.on{border-color:#3ee089;background:rgba(62,224,137,.14);color:#3ee089}.xm-side button.n.on{border-color:#ff5c7a;background:rgba(255,92,122,.14);color:#ff5c7a}
.xm-amt{display:flex;align-items:center;gap:6px;background:#1b1c21;border-radius:14px;padding:6px 8px}.xm-amt span{font:900 20px Rubik;color:#9a9aa6}
.xm-amt input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font:900 22px Rubik}.xm-amt button{background:#2a2b31;color:#fff;border:0;border-radius:10px;padding:7px 10px;font:800 13px Figtree;cursor:pointer}.xm-amt button:hover{background:#ff7aa8;color:#101114}
.xm-win{margin:8px 0 4px}.xm-win div{display:flex;justify-content:space-between;font:700 14px Figtree;color:#c9c9d2;padding:3px 2px}.xm-win b{font-family:Rubik;color:#fff}.xm-win .big b{font-size:22px;color:#3ee089}.xm-win b.g{color:#3ee089}
.xm .mk-pitch{background:#1b1c21;border:1px solid #24252c}.xm .mk-fine{color:#8a8a96}.xm .xm-go{background:#ff7aa8;color:#101114}
/* click-through fixes: the hidden cinematic dialog layer (#wDialog, z 21) kept pointer-events on #dlgText/#dlgX and silently ate clicks on the lower part of
the market popup (Trade on XO), laptop rows and the world-map card. Hidden = fully click-through; popups sit above it; the fixed HUD Trade pill hides while a popup is open. */
#wDialog:not(.on),#wDialog:not(.on) *{pointer-events:none!important}
#wModal,#wMenu{z-index:30}
body:has(#wModal.on) #xoTrade,body:has(#wMenu.on) #xoTrade{display:none}
.xm-win{min-height:88px}
.xm .xm-go{position:relative;z-index:1;pointer-events:auto;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none}
#wHearts.regen i.on{animation:hpPop .6s ease}@keyframes hpPop{0%{transform:scale(1)}40%{transform:scale(1.45);color:#ff86a0}100%{transform:scale(1)}}