.family-sprite{display:block;width:100%;height:100%;background-image:url('assets/family/friends-atlas-v2.png');background-size:300% 300%;background-position:var(--sprite-x) var(--sprite-y);background-repeat:no-repeat;clip-path:inset(4% 4% 5% 4%)}
.family-game .toy-scene{background:#f7eadf}
.family-room{position:absolute;inset:0;background:linear-gradient(#f9ecdf 0 70%,#d4dcd3 70%);overflow:hidden}
.family-room:before{content:'';position:absolute;left:7%;top:10%;width:28%;height:22%;border:8px solid #fff8ed;border-radius:50% 50% 12px 12px;background:#c6e6ea}
.family-patient{position:absolute;left:29%;top:21%;width:min(66cqw,63cqh);height:min(66cqw,63cqh);isolation:isolate}
.family-maya{left:-1%;bottom:1%;width:44%;height:58%}
.family-medico .family-maya{height:min(46cqw,46cqh)}
.family-model{inset:0;width:100%;height:100%}
.family-maquiagem .family-maya{display:none}
.family-maquiagem .family-patient{left:10%;top:17%;height:min(80cqw,80cqh);width:min(80cqw,80cqh)}
.family-patient.painted:after{content:'★';position:absolute;left:64%;top:33%;color:var(--makeup);font-size:clamp(22px,7cqw,36px);z-index:2;rotate:-15deg}
.family-patient.bowed:before{content:'';position:absolute;width:14%;height:8%;border-radius:50%;background:#ba99da;left:26%;top:14%;rotate:-20deg;z-index:2;box-shadow:16px 1px #ba99da}
.family-patient.sleeping{filter:brightness(.9);transform:rotate(-8deg)}
.family-result{position:absolute;top:13%;right:12%;width:24%;height:25%;opacity:0;transition:opacity .2s}
.family-result.shown{opacity:1}.family-result svg{width:100%;height:100%}
.family-request{position:absolute;left:5%;top:40%;width:min(22cqw,20cqh);height:min(22cqw,20cqh);padding:12px;border-radius:50%;background:#fff9ed;box-shadow:0 5px 18px #9b7e6d21}
.family-request svg{width:100%;height:100%}
.family-status{position:absolute;right:5%;top:5%;font-size:20px;font-weight:800;color:#67566d}
.family-tray{width:100%;display:flex;align-items:center;justify-content:center;gap:12px}
.family-tool{flex:0 1 110px;width:clamp(64px,24vw,110px);height:clamp(72px,25vw,110px);padding:12px;background:#fff6e6;border-radius:24px;position:relative}
.family-tool svg,.family-tool img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.family-friends-main{position:absolute;inset:0;background:#e2edf0}
.family-friend-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:8px;padding:12px}
.family-friend-choice{display:flex;flex-direction:column;min-height:0;min-width:0;padding:8px;background:#fff9ef;font-size:clamp(12px,3.6vw,17px);font-weight:800;line-height:1.15;text-align:center}
.family-friend-choice .family-sprite{flex:1;min-height:0;width:auto;aspect-ratio:1;max-width:100%}
.family-friend-actor{position:absolute;width:min(67cqw,65cqh);height:min(67cqw,65cqh);left:29%;top:23%}
.family-friend-maya{width:38%;height:57%;left:0;bottom:0}
.family-friend-effect{position:absolute;left:45%;top:9%;width:25%;height:25%}.family-friend-effect>*{width:100%;height:100%}
.family-game .toy-footer{background:#ead9e7;padding-bottom:max(10px,env(safe-area-inset-bottom))}
@media(max-height:450px){.family-friend-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}.family-tool{height:64px;width:76px;padding:8px}.family-game .toy-footer{padding:6px}.family-maya{height:73%}.family-patient{top:8%;height:85cqh;width:85cqh;left:40%}.family-request{top:23%}.family-friend-actor{top:0;height:90cqh;width:90cqh;left:40%}}
@media(prefers-reduced-motion:reduce){.family-result{transition:none}}
/* Atlas cells stay square on short screens; face accessories use the same square model coordinates. */
.family-medico .family-maya{width:min(46cqw,73cqh);height:min(46cqw,73cqh);left:3%;bottom:1%}
.family-patient.painted:after{left:60%;top:34%;font-size:clamp(12px,4cqh,18px);line-height:1;translate:-50% -50%}
.family-patient.bowed:before{width:20%;height:10%;left:35%;top:17%;translate:-50% -50%;rotate:-15deg;border-radius:5px;box-shadow:none;clip-path:polygon(0 0,43% 32%,57% 32%,100% 0,100% 100%,57% 68%,43% 68%,0 100%);background:radial-gradient(circle at 50% 50%,#f6cc65 0 14%,transparent 15%),#ba99da}
.family-friend-choice .family-sprite{--family-thumb:min(160px,calc((100cqw - 64px)/2),calc((100cqh - 64px)/3 - 50px));flex:none;width:var(--family-thumb);height:var(--family-thumb);max-width:none}
@media(max-height:450px){.family-friend-choice .family-sprite{--family-thumb:min(150px,calc((100cqw - 88px)/3),calc((100cqh - 40px)/2 - 44px))}}