/* Word-free child play: accessible names remain available to assistive technology. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body[data-mode=free] .lucy-brand,body[data-mode=free] .page-heading,body[data-mode=free] .town-bottom,body[data-mode=free] .town-shortcuts,body[data-mode=free] .delivery-tag,body[data-mode=free] .street-label,body[data-mode=free] .lucy-name,body[data-mode=free] .bottom-nav button>span:last-child{display:none}
body[data-mode=free] .app{padding-bottom:120px}body[data-mode=free] .topbar{height:95px}body[data-mode=free] .bottom-nav{width:min(380px,calc(100vw - 24px));justify-content:space-around}body[data-mode=free] .bottom-nav button{min-width:0;flex:1;min-height:72px}body[data-mode=free] .bottom-nav .nav-toy,body[data-mode=free] .nav-toy>.world-art{width:63px;height:63px}body[data-mode=free] .nav-toy>.world-art{margin:0}
body[data-mode=free] .town-scene{height:min(66vh,650px);min-height:370px;aspect-ratio:auto}body[data-mode=free] .storefront strong{padding:0;width:95px;height:84px;bottom:-13px;display:grid;place-items:center}body[data-mode=free] .storefront strong>.toy{width:84px;height:84px}body[data-mode=free] .town-player{top:6%}body[data-mode=free] .town-player>.lucy{width:165px;height:220px}
.little-shop{height:480px;min-height:0;position:relative;padding:0;background-size:100% 100%}.little-shop-friend{position:absolute;left:3%;top:7%}.little-shop-friend .clay-pal{width:90px;height:105px}.little-shelf{position:absolute;inset:29% 10% 22%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:center}.little-toy{position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(#fff8e166,#fff9ecbb);border:3px solid #fff7;border-radius:26px;min-height:150px;padding:7px;box-shadow:0 6px 0 #bd957355,0 10px 12px #79554b22;touch-action:manipulation}.little-toy>.toy,.little-toy>.world-art{width:160px;height:160px;max-width:100%}.little-toy>span:not(.toy):not(.world-art){position:absolute;bottom:0;font-size:28px;color:#8262a6}.little-toy:active{transform:scale(.93)}.little-footer{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:25px}.little-footer .btn{min-width:120px;min-height:70px}.little-footer .btn>.world-art{width:50px;height:50px}.little-footer .btn>svg{width:30px;height:30px}.little-cue{display:flex;align-items:center;justify-content:center;gap:22px;height:120px;margin-bottom:10px}.little-cue>.lucy{width:84px;height:112px}.little-gesture{font-size:37px;display:block;filter:drop-shadow(0 3px 2px #775b4930)}.little-collection{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;max-width:780px;margin:auto}.little-collection .little-toy{background:#fff5d9}.little-welcome{display:grid;place-items:center;padding:10px}.little-welcome .lucy{width:195px;height:260px}.little-primary{min-height:85px!important}.little-primary>svg{width:45px;height:45px;stroke-width:3}.little-primary>.world-art{width:65px;height:65px}.little-hand{position:absolute;bottom:12px;right:24%;font-size:40px;pointer-events:none}.little-modal .modal-top h2{display:none}.little-modal .modal-top{justify-content:flex-end}.little-modal .confirm-row>div>.lucy,.little-modal .confirm-row>div>.clay-pal{width:65px;height:85px}.little-modal .modal-actions .btn{min-height:75px;flex:1}.little-modal .modal-actions .btn svg{width:37px;height:37px;stroke-width:4}.little-modal .confirm-row{gap:6px}.little-modal .confirm-group .toy{width:125px;height:125px}.little-modal .squish-stage{height:290px}.little-modal .squish-stage #squish>.toy{width:245px;height:245px}
.little-trade{max-width:600px;margin:auto}.little-trade-friend{display:flex;align-items:center;justify-content:center;gap:15px;height:88px}.little-trade-friend .portrait{width:90px;height:96px;margin:0}.little-trade-friend .clay-pal{width:90px;height:96px}.little-trade .trade-mat{transform:none;border-radius:14px}.little-trade .offer-zone{position:relative;display:flex;align-items:center;min-height:116px;padding:4px 12px}.little-trade .offer-label{width:60px}.little-trade .offer-label>.world-art{width:58px;height:78px}.little-trade .offer-toys{flex:1;min-height:108px;position:relative;display:flex;align-items:center;justify-content:center}.little-trade .offer-toys>.toy,.little-trade .offer-toys .toy{width:108px;height:108px}.little-trade .offer-toys.yours>button{position:static;transform:none;background:transparent}.little-npc-check{position:absolute;right:12px;top:12px;color:#ffdf54}.little-npc-check svg{stroke-width:4}.little-trade .trade-actions{grid-template-columns:1fr 1fr}.little-trade .mat-symbol{min-height:64px}.little-trade .mat-symbol svg{width:38px;height:38px}.little-drop-hint{display:flex;gap:10px;align-items:center;color:#a85880}.little-drop-hint>svg{width:42px;height:42px}.little-trade-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:17px}.little-trade-picker .little-toy{min-height:100px;padding:4px}.little-trade-picker .toy{width:110px;height:110px}.little-trade-picker .picked{background:#e2f4be;border-color:#90be64;box-shadow:0 5px #81a94e}.little-pager{display:flex;justify-content:space-between;margin:13px 5px 0}.little-pager button:first-child svg{transform:rotate(180deg)}
body[data-mode=free] .play-toolbar>span,body[data-mode=free] .lesson-button,body[data-mode=free] .photo-tools,body[data-mode=free] .footer-note,body[data-mode=free] .board-sticker,body[data-mode=free] .play-toys .tray-toy>span:not(.toy),body[data-mode=free] .toast{display:none}body[data-mode=free] .play-toolbar{justify-content:flex-end}body[data-mode=free] .play-tabs{justify-content:center}body[data-mode=free] .play-tabs .btn{min-height:75px;padding:3px 16px}body[data-mode=free] .play-tabs .toy{width:70px;height:70px}body[data-mode=free] .play-board{max-height:420px}body[data-mode=free] .play-toys{margin-top:20px}
@media(max-width:760px){body[data-mode=free] .topbar{height:85px}body[data-mode=free] .town-scene{height:calc(100dvh - 222px);min-height:360px}body[data-mode=free] .storefront strong{width:84px;height:77px}body[data-mode=free] .storefront strong>.toy{width:72px;height:72px}body[data-mode=free] .town-player>.lucy{width:103px;height:137px}.little-shop{height:400px;min-height:0}.little-shelf{inset:28% 5% 20%;gap:7px}.little-shelf .little-toy{min-height:126px;padding:3px;border-radius:19px}.little-shelf .little-toy>.toy,.little-shelf .little-toy>.world-art{width:110px;height:110px}.little-shop-friend .clay-pal{width:70px;height:80px}.little-collection{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}.little-collection .little-toy{min-height:142px}.little-collection .toy{width:125px;height:125px}.little-cue{height:105px}.little-cue>.lucy{width:75px;height:100px}.little-trade-friend{height:74px}.little-trade-friend .portrait,.little-trade-friend .clay-pal{width:70px;height:78px}.little-trade .offer-zone{min-height:98px}.little-trade .offer-toys{min-height:87px}.little-trade .offer-toys>.toy,.little-trade .offer-toys .toy{width:87px;height:87px}.little-trade .offer-label{width:48px}.little-trade .offer-label>.world-art{width:45px;height:60px}.little-trade-picker .little-toy{min-height:90px}.little-trade-picker .toy{width:85px;height:85px}.little-modal .confirm-group .toy{width:96px;height:96px}.little-modal .squish-stage{height:265px}body[data-mode=free] .play-tabs .btn{min-width:0;flex:1}.little-modal .confirm-row{margin:12px 0}.little-welcome .lucy{width:175px;height:234px}}
@media(prefers-reduced-motion:no-preference){.little-hand,.little-gesture{animation:little-point 1.5s ease-in-out infinite}body[data-mode=free] .storefront:first-child strong{animation:little-invite 2.5s ease-in-out infinite}@keyframes little-point{50%{transform:translateY(-9px) scale(1.08)}}@keyframes little-invite{50%{margin-bottom:6px}}}
body[data-mode=free] .play-tabs{display:none}body[data-mode=free] .play-toolbar [data-action=clearplay]{min-width:56px;min-height:48px;background:#fff4dc;border:3px solid white;border-radius:18px;box-shadow:0 4px #d2b78f;margin-bottom:10px}body[data-mode=free] .play-board{max-height:390px}
/* Each friend occupies a square atlas cell. Preserve that ratio in every context,
   including welcome cards, shopkeepers, trading portraits and mobile layouts. */
.world-art.art-friends.clay-pal{height:auto!important;aspect-ratio:1 / 1;flex-shrink:0}

.town-voice-help{position:relative;display:flex;justify-content:flex-end;margin:-65px 15px 20px;z-index:5;pointer-events:none}.town-voice-help button{pointer-events:auto}

/* Leo uses a portrait cutout instead of the animal sprite atlas. */
.clay-pal.pal-leo{object-fit:contain;height:auto!important;aspect-ratio:2/3;flex-shrink:0}.little-trade-friend .portrait:has(.pal-leo){overflow:visible}.little-trade-friend .pal-leo{height:78px!important;width:52px}.little-modal .confirm-row>div>.pal-leo{height:85px!important;width:57px}.little-trade .offer-label>.pal-leo{height:60px!important;width:40px}
/* Give Leo a readable face-and-body portrait on small screens. */
.little-trade-friend:has(.pal-leo){height:158px;gap:20px}
.little-trade-friend .portrait:has(.pal-leo){width:132px;height:150px;overflow:hidden;border-radius:28px;background:linear-gradient(#e0f8ff,#cfebed);box-shadow:0 5px 0 #aad1d6;flex-shrink:0}
.little-trade-friend .portrait>.pal-leo{display:block;width:132px;height:198px!important;max-width:none;transform:scale(1.42);transform-origin:50% 0;object-fit:contain}
.little-modal .confirm-row>div>.pal-leo{width:88px;height:132px!important}
@media(max-width:760px){.little-trade-friend:has(.pal-leo){margin-bottom:12px}.little-trade-friend:has(.pal-leo) .icon-button{min-width:48px;min-height:48px}}
/* Keep the complete child trading loop above mobile browser and navigation bars. */
@media(max-width:760px){
 body[data-mode=free] .app:has(.little-trade){height:100svh;min-height:0;display:flex;flex-direction:column;padding-bottom:calc(124px + env(safe-area-inset-bottom))}
 body[data-mode=free] .app:has(.little-trade) .topbar{height:64px;flex:0 0 64px}
 .app:has(.little-trade) #main{flex:1;min-height:0}
 .little-trade{height:100%;display:grid;grid-template-rows:clamp(76px,14svh,104px) minmax(0,1fr) clamp(64px,11svh,82px) 44px;gap:8px}
 .little-trade-friend,.little-trade-friend:has(.pal-leo){height:100%;margin:0;gap:18px}
 .little-trade-friend .portrait:has(.pal-leo){width:90px;height:100%;max-height:100px;border-radius:21px}
 .little-trade-friend .portrait>.pal-leo{width:90px;height:135px!important;transform:scale(1.5)}
 .little-trade .trade-mat{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr) 52px;padding:0;margin:0}
 .little-trade .offer-zone{min-height:0;margin:0;padding:2px 10px;overflow:hidden}
 .little-trade .offer-toys{height:100%;min-height:0}
 .little-trade .offer-toys>.toy,.little-trade .offer-toys .toy{width:70px;height:70px;max-height:100%}
 .little-trade .offer-toys.yours>button{height:100%;display:grid;place-items:center;padding:0}
 .little-trade .trade-actions{min-height:0;margin:0}
 .little-trade .mat-symbol{min-height:48px;padding:4px}
 .little-trade .mat-symbol svg{width:32px;height:32px}
 .little-trade-picker{min-height:0;margin:0;gap:8px}
 .little-trade-picker .little-toy{height:100%;min-height:0;padding:0;border-radius:20px}
 .little-trade-picker .toy{width:70px;height:70px;max-height:100%}
 .little-pager{margin:0 4px;align-items:center}
 .little-pager .icon-button{min-height:44px;min-width:44px}
}