.friend-page-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.friend-page-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.friend-space-card{display:flex;align-items:center;gap:15px;text-align:left;padding:16px;background:#f3efdfff;border:1px solid #c4d1b5;border-radius:18px;min-width:0}
.friend-picture{display:block;flex:none;width:64px;height:64px;background:#fff8e8b0;border:1px solid #d6dbc2;border-radius:50%;padding:8px}
.friend-picture svg,.friend-avatar svg{display:block;width:100%;height:100%}
.friend-avatar{padding:5px!important}
.friend-copy{min-width:0;display:grid;gap:6px}.friend-copy strong{font-size:15px;overflow-wrap:anywhere}.friend-copy span{font-size:12px;color:#6d795d}.friend-copy small{font-size:11px;color:#8b8d73}
.friend-space-dialog{width:100vw!important;max-width:none!important;height:100dvh!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;overflow:hidden!important;background:#f3ecda;color:#536846}
.friend-space-dialog .feature-header{position:absolute;top:22px;left:3%;right:3%;z-index:10;margin:0;padding:0;border:0;pointer-events:none}
.friend-space-dialog .feature-header h2{font-size:18px;max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 4px white;pointer-events:auto}
.friend-space-dialog #feature-close{pointer-events:auto;font-size:12px;padding:8px 15px;border-radius:22px;background:#fff8e9d0;border:1px solid #d5dec4;color:#536846}
.friend-space-dialog #feature-body{position:absolute;inset:0;height:100%;overflow:hidden}
.friend-space-dialog #feature-message{position:absolute;bottom:0;z-index:12;left:20%;right:20%;text-align:center}
.friend-space{position:relative;height:100%;overflow:hidden;font-family:system-ui,"Microsoft YaHei",sans-serif}
.friend-space-scene{position:absolute;inset:0}.friend-space-scene canvas{display:block;width:100%;height:100%}
.friend-space-loading{position:absolute;inset:40% 10% auto;text-align:center;font-size:16px}
.friend-space-meta{position:absolute;top:100px;left:3%;width:200px;padding:18px;z-index:3;border-radius:22px;background:#fffdf54d;border:1px solid #fff8e533;backdrop-filter:blur(4px)}
.friend-space-meta h3{font-size:16px;margin:15px 0 8px;overflow-wrap:anywhere}.friend-space-meta p{font-size:12px;line-height:1.6}.friend-space-meta button{font-size:12px;padding:8px;border:1px solid #72846877;border-radius:14px;color:#526946;background:#fff7e955}
.friend-space-modes{position:absolute;top:28px;left:32%;right:32%;z-index:4;display:flex;gap:6px;justify-content:center}
.friend-space-modes button{font-size:11px;padding:7px 10px;border-radius:16px;border:1px solid #c3ceb099;background:#fff9e899;color:#57694b;white-space:nowrap}.friend-space-modes button[aria-pressed=true]{background:#dfeacfff;border-color:#849b72}
/* Percentage translation follows this panel's width at every screen size. */
.friend-space .journey-partners{top:100px;bottom:26.25px;right:3%;width:350px;transform:translateX(-10%);background:#fffdf54d;border:1px solid #fff8e533;border-radius:22px;padding:12px;backdrop-filter:blur(4px);pointer-events:auto;gap:16px;z-index:3}
.friend-space .journey-panel-title{font-size:15px;font-weight:650;margin:0;min-height:25px;justify-content:center}
.friend-wardrobe-rail{flex:1;min-height:0;display:flex;align-items:center;gap:8px;width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;touch-action:pan-x;scrollbar-width:thin}
.friend-space .adv-cat,.friend-space .adv-rider{flex:0 0 calc((100% - 16px)/3);width:calc((100% - 16px)/3);height:126px;transform:scale(.9);opacity:1!important;background:#fffbec47!important;border:1px solid #647a537a!important;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px!important;color:#4e6146;text-shadow:0 1px 3px white;box-sizing:border-box;scroll-snap-align:start}
.friend-space .selected{border-color:#516d3fe6!important;background:#f5dab38c!important}
.friend-space .adv-cat svg{width:80px;height:76px;max-width:100%;flex:none}.friend-space .adv-rider .rider-portrait{width:58px;height:61px;flex:none;display:block!important}
.friend-space .adv-cat strong,.friend-space .adv-rider strong{font-size:13px;margin:0}.friend-space .adv-cat small,.friend-space .adv-rider small{font-size:10px;display:block!important}
.friend-space-pair{position:absolute;bottom:12px;left:25%;right:30%;text-align:center;z-index:2;font-size:12px;text-shadow:0 1px 4px white}
@media(max-width:600px){.friend-page-list{grid-template-columns:1fr}.friend-page-tools{gap:8px}.friend-space-card{padding:13px}}
@media(orientation:landscape) and (max-height:500px){
 .friend-space-dialog .feature-header{top:10px}.friend-space-dialog .feature-header h2{font-size:13px}.friend-space-dialog #feature-close{font-size:10px;padding:5px 10px}
 .friend-space-modes{top:10px}.friend-space-modes button{font-size:9px;padding:5px 8px}
 .friend-space-meta{top:55px;left:8px;width:145px;padding:10px}.friend-space-meta .friend-picture{width:44px;height:44px;padding:5px}.friend-space-meta h3{font-size:12px;margin:7px 0}.friend-space-meta p{font-size:9px;margin:6px 0}.friend-space-meta button{font-size:9px;padding:6px}
 .friend-space .journey-partners{top:55px;bottom:17px;right:8px;width:252px;padding:6px;gap:4px}.friend-space .journey-panel-title{font-size:10px;min-height:20px}
 .friend-wardrobe-rail{gap:6px}.friend-space .adv-cat,.friend-space .adv-rider{flex-basis:calc((100% - 12px)/3);height:62px;padding:3px!important;gap:2px}
 .friend-space .adv-cat svg{width:46px;height:40px}.friend-space .adv-rider .rider-portrait{width:35px;height:38px}.friend-space .adv-cat strong,.friend-space .adv-rider strong{font-size:9px}.friend-space .adv-cat small,.friend-space .adv-rider small{font-size:7px}
}
@media(orientation:portrait) and (max-width:700px){
 .friend-space-dialog .feature-header{top:15px;left:12px;right:12px}.friend-space-dialog .feature-header h2{font-size:13px;max-width:70%}
 .friend-space-modes{top:60px;left:15%;right:15%}.friend-space-meta{top:100px;left:5px;width:112px;padding:8px}.friend-space-meta h3{font-size:12px}.friend-space-meta p{font-size:10px}.friend-space-meta .friend-picture{width:54px;height:54px}.friend-space-meta button{font-size:10px;padding:6px}
 .friend-space .journey-partners{top:100px;bottom:58.75px;right:4px;width:min(228px,calc(100vw - 130px));padding:4px;gap:12px}.friend-space .journey-panel-title{font-size:11px}
 .friend-wardrobe-rail{gap:6px}.friend-space .adv-cat,.friend-space .adv-rider{flex-basis:calc((100% - 12px)/3);height:94px;padding:4px!important;gap:2px}.friend-space .adv-cat svg{width:48px;height:46px}.friend-space .adv-rider .rider-portrait{width:35px;height:39px}.friend-space .adv-cat strong,.friend-space .adv-rider strong{font-size:9px}.friend-space .adv-cat small,.friend-space .adv-rider small{font-size:7px}
 .friend-space-pair{left:5%;right:5%;bottom:16px;font-size:10px}
}