/* v38 local candidate: look above, find below; the finished toy gets a stage. */
.app{display:block;max-width:1640px;min-height:100dvh;padding:12px 16px}
.category-section,.vehicle-choice,.reference{max-width:none;width:100%;margin:0 0 12px;padding:10px}
.category-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;max-width:none}
.category-option{display:flex;align-items:center;justify-content:center;gap:7px;min-height:58px;padding:6px;font-size:14px}
.category-option:last-child{grid-column:auto}
.category-option svg{width:56px;height:38px;flex-shrink:0}
.category-option[aria-pressed=true] svg{filter:drop-shadow(0 0 2px #fff)}
.category-option span,.vehicle-option span{white-space:nowrap}
.play{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
.search-area,.result-area{min-width:0;display:flex;flex-direction:column;gap:10px}
.search-area .reference{margin:0;max-width:none}
.search-area .search-panel,.result-area .workshop-area,.result-area .word-card{grid-area:auto;width:100%}
.instruction-number{display:none}
.reference-heading h2{margin:0}.reference-heading p{font-size:13px}
body .reference .steps{grid-template-columns:repeat(var(--part-count),minmax(0,1fr));gap:6px}
body .reference .step{flex-direction:column;min-height:66px;padding:5px 2px;gap:2px}
body .reference .step svg{width:60px;height:40px}
body .reference .step-name{font-size:13px}
.scene{aspect-ratio:800/620;max-height:none;height:auto}
.object{width:16%;height:18%;min-width:44px;min-height:44px}
.object svg{width:96%;height:96%}
.search-heading{min-height:68px;padding:9px 10px;gap:8px}
.search-copy h2{font-size:17px}.search-copy p:last-child{font-size:14px}
.search-footer{padding:7px 10px;font-size:12px;min-height:30px}
.workshop-area .workshop{display:flex;flex-direction:column;gap:8px;padding:14px}
.workshop-title h2{font-size:16px}.workshop-tag{font-size:12px}
.workshop-area .assembly{display:grid;place-items:center;min-height:200px;grid-area:auto;flex:none}
.workshop-area .assembly svg,body[data-play=music] .workshop-area .assembly svg{width:100%;height:auto;max-height:380px}
.workshop-area .role-copy{min-height:0;margin:0;font-size:14px;line-height:1.5;grid-area:auto}
.workshop-controls{display:grid;grid-template-columns:1fr;gap:7px}
.workshop-controls:has(#repeat-action:not([hidden])){grid-template-columns:1fr 1fr}
.workshop-controls .primary{min-height:48px;font-size:16px;padding:9px}
.workshop-controls #repeat-action{margin:0}
.workshop-controls .message{grid-column:1/-1;min-height:0;margin:0;font-size:12px;line-height:1.5}
.result-area .word-card{margin:0;padding:9px 12px;gap:6px 10px;grid-template-columns:44px minmax(0,1fr)}
.word-picture{width:44px;height:52px}.word-copy h2{font-size:15px}.word-copy #word-en-name{font-size:13px}.word-copy #word-detail{font-size:12px;line-height:1.5}
.word-controls{grid-column:1/-1}.word-actions button{min-height:44px;padding:5px;font-size:13px}
.word-controls #word-status{font-size:11px;line-height:1.4;margin:4px 0 0}
.footer{grid-area:auto;min-height:44px;padding:0;margin-top:12px}
.category-section h2,.vehicle-choice h2,.reference-heading h2,.search-copy h2{line-height:1.25}
.category-option,.vehicle-option,.step-name{line-height:1.25}
.search-copy .eyebrow{line-height:1.3;margin-bottom:3px}
.search-copy p:last-child{line-height:1.3;margin-top:3px}
.word-copy .eyebrow{line-height:1.25;margin-bottom:2px}
.word-copy h2,.word-copy #word-en-name{line-height:1.25}
.word-copy #word-detail{line-height:1.35}
@media(min-width:1000px) and (min-height:700px){
 .app{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:44px auto auto 44px;gap:8px;padding:8px 12px;align-items:start}
 .header{grid-column:1/-1;grid-row:1;margin:0;height:44px}.header h1{font-size:22px}
 .category-section{grid-column:1;grid-row:2}.vehicle-choice{grid-column:2;grid-row:2}
 .category-section,.vehicle-choice{padding:7px 9px;margin:0;align-self:stretch}
 .category-section h2,.vehicle-choice h2{font-size:15px;margin:0 0 5px}
 .category-picker{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
 .category-option{flex-direction:column;gap:0;font-size:12px;min-height:53px;padding:3px 1px}
 .category-option svg{width:48px;height:27px}
 body .vehicle-picker,body[data-play=pretend] .vehicle-picker,body[data-play=cooking] .vehicle-picker{grid-template-columns:repeat(var(--toy-count,3),minmax(0,1fr));gap:5px}
 body[data-play=cooking] .vehicle-picker{grid-template-columns:repeat(4,minmax(0,1fr))}
 body .vehicle-option{flex-direction:column;gap:0;font-size:13px;min-height:53px;padding:3px 1px}
 body .vehicle-option svg{width:65px;height:28px}
 .play{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:14px}
 .reference{padding:7px 9px;border-radius:14px}.reference-heading{margin-bottom:5px}.reference-heading h2{font-size:15px}
 body .reference:has(.step:nth-child(5)) .steps{grid-template-columns:repeat(var(--part-count),minmax(0,1fr))}
 body .reference .step{min-height:59px;padding:3px 1px}body .reference .step svg{height:34px}body .reference .step-name{font-size:13px}
 .scene{height:clamp(250px,calc(100dvh - 440px),490px);aspect-ratio:auto}
 .search-heading{min-height:65px;padding:8px 10px}.search-copy h2{font-size:16px}.search-copy p:last-child{font-size:13px}.target-picture{width:53px;height:48px}.target-picture svg{width:48px;height:40px}
 .search-footer{min-height:26px;padding:5px 10px}.search-area,.result-area{gap:8px}
 .workshop-area{gap:8px}.workshop-area .workshop{padding:10px;gap:6px}
 .workshop-area .assembly{min-height:0}
 .workshop-area .assembly svg,body[data-play=music] .workshop-area .assembly svg{max-height:clamp(205px,calc(100dvh - 495px),420px)}
 .workshop-area .role-copy{font-size:13px}.workshop-title h2{font-size:15px}
 .workshop-controls .primary{min-height:44px;padding:7px;font-size:15px}.workshop-controls .message{font-size:12px}
 .instrument-controls{margin:0;gap:5px}.instrument-controls button{min-height:44px;padding:5px;font-size:13px}
 .result-area .word-card{padding:7px 10px;gap:5px 8px}.word-picture{height:44px}.word-copy h2{font-size:14px}.word-copy #word-en-name{font-size:13px}.word-copy #word-detail{font-size:11px}
 .result-area .word-card{grid-template-columns:minmax(0,1fr) minmax(220px,1.15fr)}.result-area .word-picture{display:none}.result-area .word-controls{grid-column:auto}
 .workshop-area .assembly svg,body[data-play=music] .workshop-area .assembly svg{max-height:clamp(170px,calc(100dvh - 552px),390px)}
 body:not([data-play=music]) .workshop-area .assembly svg{max-height:clamp(210px,calc(100dvh - 510px),420px)}
 .footer{grid-column:1/-1;grid-row:4;margin:0;align-self:end}
 .instrument-controls[data-instrument=piano] button{min-height:44px;padding:5px;line-height:1.25}
}
@media(min-width:700px) and (max-width:999px) and (min-height:900px){
 .app{display:block;padding:10px 12px}.header{margin-bottom:10px}.header h1{font-size:20px}
 .category-section,.vehicle-choice{padding:7px 9px;margin-bottom:9px}.category-section h2,.vehicle-choice h2{font-size:15px;margin-bottom:5px}
 .category-picker{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.category-option{flex-direction:row;gap:3px;font-size:12px;min-height:48px;padding:3px}.category-option svg{width:36px;height:30px}
 body .vehicle-picker,body[data-play=pretend] .vehicle-picker{grid-template-columns:repeat(3,minmax(0,1fr))}body[data-play=cooking] .vehicle-picker{grid-template-columns:repeat(4,minmax(0,1fr))}
 body .vehicle-option{flex-direction:row;gap:4px;min-height:48px;padding:3px;font-size:12px}body .vehicle-option svg{width:44px;height:30px}
 .play{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px}
 body .reference .steps{grid-template-columns:repeat(3,minmax(0,1fr))}body .reference .step{min-height:62px}body .reference .step-name{font-size:12px}
 .reference-heading{flex-wrap:wrap;gap:3px}.reference-heading h2{font-size:15px}.reference-heading p{font-size:12px}
 .scene{height:clamp(270px,calc(100dvh - 700px),460px);aspect-ratio:auto}
 .workshop-area .assembly svg,body[data-play=music] .workshop-area .assembly svg{max-height:260px}.workshop-area .assembly{min-height:0}
 .workshop-area .workshop{padding:10px}.workshop-title{flex-wrap:wrap;gap:4px}.workshop-tag{font-size:11px}.workshop-title h2{font-size:14px}
 .workshop-controls .primary{font-size:13px;padding:7px}.workshop-area .role-copy{font-size:12px}.word-copy h2{font-size:14px}.word-copy #word-en-name{font-size:13px}
 .instrument-controls button{min-height:44px;font-size:12px;padding:4px}
}
@media(max-width:699px), (max-height:699px){
 .play{display:flex;flex-direction:column;gap:16px}.search-area,.result-area{width:100%}
 .category-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.category-option{flex-direction:column;gap:2px;font-size:12px;min-height:65px;padding:4px 2px}.category-option svg{width:54px;height:32px}
 .category-option:last-child{grid-column:auto}
 .workshop-area .assembly{min-height:170px}.workshop-area .assembly svg,body[data-play=music] .workshop-area .assembly svg{max-height:300px}
 .scene{height:auto;aspect-ratio:800/620;max-height:none}
 .search-heading{min-height:70px}.search-copy h2{font-size:16px}.search-copy p:last-child{font-size:13px}
 body .reference .steps{grid-template-columns:repeat(2,minmax(0,1fr))}body .reference .step{min-height:68px}body .reference .step-name{font-size:14px}body .reference .step svg{height:42px;width:62px}
 .workshop-title{flex-wrap:wrap;gap:5px}.workshop-controls .primary{font-size:14px}.workshop-area .role-copy{font-size:13px}
 .header{flex-wrap:wrap;gap:8px}.header h1{font-size:18px}.header .tools{margin-left:auto}
}
@media(min-width:700px) and (max-height:699px){.scene{max-width:650px;margin:auto}.search-area .reference .steps{grid-template-columns:repeat(var(--part-count),minmax(0,1fr))}.category-picker{grid-template-columns:repeat(5,minmax(0,1fr))}}
