/* Research is a branching game board; selection reveals products and unlocks. */
.r-room{height:100%;min-height:0;display:grid;grid-template-rows:32px minmax(0,1fr) 34px;gap:7px;padding:7px 12px;background:radial-gradient(ellipse at 25% 40%,#82956d,#3e594d);color:#f2e8c4}
.r-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.r-heading h1{font-size:19px;margin:0}.r-heading>span{font-size:11px}.r-heading>span b{color:#f4cf79;font-size:17px}.r-room button{min-height:30px;font-size:11px;padding:4px 8px}.r-workspace{display:grid;grid-template-columns:1.6fr 1fr;gap:12px;min-height:0}.r-tree{display:flex;flex-direction:column;min-height:0;gap:6px}.r-branches{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;gap:10px;height:30px;flex:none}.r-branches>div{display:flex;flex-direction:column;gap:2px}.r-branches b{font-size:13px}.r-branches small{font-size:9px;color:#e4dfbc}.r-nodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:13px 10px;flex:1;min-height:0}.r-nodes>button{position:relative;min-height:0;text-align:left;justify-content:flex-start;background:#304e43;border:1px solid #a6ad80;color:#c7d1af;gap:5px;padding:4px}.r-nodes>button:nth-child(n+4):before{content:'';position:absolute;left:50%;height:13px;width:3px;background:#d0b675;bottom:100%}.r-nodes>button.selected{background:#ead08a;border:2px solid #fff0ae;color:#243e35}.r-nodes>button.learned:not(.selected){background:#9cac79;color:#233e31}.r-nodes .item-art{width:30px;height:34px;flex:none}.r-nodes span{display:flex;flex-direction:column;gap:3px;min-width:0}.r-nodes b{font-size:11px}.r-nodes small{font-size:9px}.r-detail{background:#f0e7c9;color:#294538;border:2px solid #a3ad85;border-radius:8px;padding:8px;display:flex;flex-direction:column;min-height:0;gap:5px}.r-detail header h2{margin:2px 0;font-size:18px}.r-detail header small{font-size:10px}.r-detail>p{font-size:11px;line-height:1.4;margin:0}.r-products{display:flex;gap:4px;flex:1;min-height:0}.r-products button{flex:1;min-width:0;min-height:0;flex-direction:column;gap:3px;background:#d9debd;padding:4px}.r-products .item-art{width:30px;height:32px}.r-products span{display:flex;flex-direction:column;gap:2px}.r-products b{font-size:10px}.r-products small{font-size:8px}.r-cost{display:flex;flex-direction:column;gap:3px;flex:none}.r-cost b{font-size:12px}.r-cost small{font-size:10px;line-height:1.3}.r-detail footer{display:flex;gap:5px;flex:none}.r-detail footer button{flex:1;min-width:0}.r-progress{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;padding:4px 7px;background:#29473d}.r-progress>span{font-size:9px}.r-progress>button{min-height:25px;padding:2px 7px}.r-city-sign{position:absolute;right:12px;top:12px;background:#f0e6c9;border:2px solid #a7aa80;border-radius:8px;padding:10px;display:flex;flex-wrap:wrap;gap:6px;width:280px;box-shadow:0 4px 0 #203b3355}.r-city-sign>div{width:100%;display:flex;flex-direction:column;gap:3px}.r-city-sign small{font-size:10px}.r-city-sign b{font-size:14px;line-height:1.4}.r-city-sign button{font-size:11px;min-height:31px;padding:4px 9px}.r-city-sign+.city-paper{display:none}.r-product-modal{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;height:100%;font-size:13px}.r-product-modal>.item-art{width:55px;height:60px}.r-product-modal p,.r-product-modal h2{margin:0}.r-logistics,.r-history{display:grid;grid-template-columns:1fr 1fr;gap:14px;flex:1;min-height:0}.r-logistics section,.r-history section{padding:10px;background:#dee0bd;display:flex;flex-direction:column;gap:10px}.r-logistics section>div{height:48px}.r-logistics .icon{height:44px;width:44px}.r-logistics h2,.r-history h2{font-size:17px;margin:0}.r-logistics p,.r-history p{font-size:12px;line-height:1.5;margin:0}.r-logistics button{margin-top:auto}.r-locked-recipe{opacity:.6}.m-recipe-grid .r-lock{font-size:9px;color:#826b43}.r-forge-lock{font-size:10px;color:#84613b;margin:0}.r-result-change{font-size:11px;line-height:1.3;color:#365c43}.r-node-reward{color:#ecd08b}.r-proof{color:#416953;font-size:11px}
.short-screen .r-room{grid-template-rows:27px minmax(0,1fr) 29px;padding:4px 8px;gap:4px}.short-screen .r-heading h1{font-size:16px}.short-screen .r-workspace{grid-template-columns:1.45fr 1fr;gap:7px}.short-screen .r-branches{height:20px}.short-screen .r-branches small{display:none}.short-screen .r-nodes{gap:8px}.short-screen .r-nodes>button:nth-child(n+4):before{height:8px}.short-screen .r-nodes .item-art{width:23px;height:26px}.short-screen .r-nodes b{font-size:10px}.short-screen .r-nodes span{gap:1px}.short-screen .r-detail{padding:4px;gap:3px}.short-screen .r-detail header{display:flex;align-items:center;gap:5px}.short-screen .r-detail header h2{font-size:14px}.short-screen .r-detail header small{font-size:8px}.short-screen .r-detail>p{font-size:10px;line-height:1.2}.short-screen .r-products button{flex-direction:row;padding:2px;gap:2px}.short-screen .r-products .item-art{width:22px;height:24px}.short-screen .r-products small{display:none}.short-screen .r-products b{font-size:9px}.short-screen .r-cost small{font-size:9px;line-height:1.15}.short-screen .r-detail footer button{font-size:10px;min-height:29px;padding:2px 5px}.short-screen .r-progress>span{display:none}.short-screen .r-city-sign{top:6px;width:245px;padding:6px;gap:4px}.short-screen .r-city-sign b{font-size:11px}.short-screen .r-city-sign button{font-size:10px;min-height:27px}.short-screen .r-city-sign small{display:none}.short-screen .r-logistics section,.short-screen .r-history section{padding:7px;gap:5px}.short-screen .r-history p{font-size:11px;line-height:1.3}.short-screen .r-logistics section>div{height:25px}.short-screen .r-logistics .icon{height:25px;width:25px}

@media (max-width:720px) and (orientation:landscape){
 .r-city-sign{width:205px!important;top:6px!important;bottom:auto;right:8px;padding:5px!important;gap:3px!important}
 .r-city-sign>div{display:none}.r-city-sign button{flex:1;font-size:10px!important;min-height:27px!important;padding:2px 4px!important}
}
/* Keep both the item name and buyer identity inside short demand rows. */
.short-screen .m-demand-grid .m-order{padding-top:2px;padding-bottom:2px}
.short-screen .m-demand-grid .m-card-top>div{display:flex;flex-direction:column;gap:0;min-width:0}
.short-screen .m-demand-grid .m-card h3{font-size:10px;line-height:11px;margin:0;order:0}
.short-screen .m-demand-grid .m-card-top small{font-size:8px;line-height:9px;order:1}
.short-screen .m-demand-grid .m-card-top>.item-art{height:20px;width:20px}
.r-product-title{display:flex;align-items:center;gap:12px}.r-product-title .item-art{width:40px;height:44px}.r-product-modal{gap:8px;align-items:stretch;text-align:left}.r-product-modal>strong{font-size:13px;color:#386346}.r-product-modal>small{font-size:11px}.r-demand-conditions{background:#dce1c4;padding:8px;border-radius:5px}.r-demand-conditions p{font-size:11px;margin:3px 0}
@media(orientation:landscape) and (max-height:350px){.r-product-modal{gap:4px}.r-product-modal p{font-size:11px;line-height:1.35}.r-product-title .item-art{width:28px;height:30px}.r-product-title h2{font-size:16px}.r-product-modal>strong{font-size:11px}.r-product-modal>small{font-size:10px}.r-demand-conditions{padding:4px}.r-product-modal button{min-height:30px}.r-products small{display:none}}