/* Approved category-box composition; existing Higgsfield panel/button artwork. */
body[data-screen=shop]{overflow:hidden}
body[data-screen=shop] #shopScreen.category-shop{position:fixed;inset:0 0 calc(var(--game-nav-height,82px) + env(safe-area-inset-bottom));z-index:10;max-width:none!important;margin:0!important;padding:10px max(10px,env(safe-area-inset-right)) 4px max(10px,env(safe-area-inset-left))!important;display:grid;grid-template-rows:48px 36px minmax(0,1fr) 36px minmax(190px,34%);gap:6px;background:transparent;overflow:hidden;box-sizing:border-box;color:#e9f7ff}
#shopScreen.category-shop[hidden]{display:none!important}
#shopScreen.category-shop *{box-sizing:border-box}
#shopScreen.category-shop .section-heading{margin:0;display:flex;align-items:center;gap:12px;min-height:0}
#shopScreen.category-shop h1{font-size:clamp(18px,2.2vw,32px);margin:0;white-space:nowrap}
#shopScreen.category-shop button,#shopScreen.category-shop select{font-family:inherit}
#shopScreen.category-shop .shop-filter-bar{display:flex;gap:3px;margin-left:auto}
#shopScreen.category-shop .shop-filter-bar button,#shopScreen.category-shop .shop-category-tabs button{min-height:34px;padding:5px 12px;font-size:12px;background:#071924cc;border:1px solid #345568;border-radius:0;white-space:nowrap;color:#c2dbea}
#shopScreen.category-shop [aria-pressed=true]{color:#fff!important;outline:2px solid #69dfff;outline-offset:-2px}
#shopScreen.category-shop :focus-visible{outline:2px solid #fff;outline-offset:-2px}
#shopScreen.category-shop .shop-sort-label{display:flex;align-items:center;gap:5px;font-size:12px;margin:0}
#shopScreen.category-shop select{width:auto;max-width:85px;min-height:34px;margin:0;padding:4px;background:#071924;color:#fff}
#shopScreen.category-shop #shopServices{grid-row:2;margin:0;padding:0 10px;border:0;border-image:none;background:transparent;z-index:6}
#shopScreen.category-shop .shop-services-heading{display:flex;align-items:center;gap:10px;height:36px;padding:0}
#shopScreen.category-shop .shop-services-heading strong{font-size:11px}
#shopScreen.category-shop .shop-services-heading button{min-height:32px;padding:4px 12px;font-size:12px}
#shopScreen.category-shop #shopServicePanel:not([hidden]){position:absolute;inset:94px 10px 8px;overflow:auto;padding:14px;background:#07141bf5;border:1px solid #71c7e4}
#shopScreen.category-shop.service-open .shop-showcase,#shopScreen.category-shop.service-open .shop-category-tabs,#shopScreen.category-shop.service-open .shop-gallery{visibility:hidden;pointer-events:none}
#shopScreen.category-shop .shop-showcase{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr);min-height:0;gap:10px}
#shopScreen.category-shop #shopPreview{position:relative;min-width:0;min-height:0;overflow:hidden}
#shopScreen.category-shop #shopPreview canvas{display:block;width:100%;height:100%;touch-action:none}
#shopScreen.category-shop #shopPreview canvas[hidden]{display:none}
#shopScreen.category-shop .shop-model-hint{position:absolute;left:12px;bottom:10px;z-index:2;color:#daf5ff;background:#071924b8;padding:4px 8px;font-size:11px;pointer-events:none}
#shopScreen.category-shop .shop-details{min-height:0;overflow:auto;padding:16px 20px;overscroll-behavior:contain;background:#061722df;border:1px solid transparent;border-image:url('/models/ui/shared-metal/frame-square.png') 60 fill / 17px / 0 stretch}
#shopScreen.category-shop .shop-details h2{font-size:clamp(17px,2vw,26px);margin:2px 0 8px;line-height:1.1}
#shopScreen.category-shop .shop-details h3{font-size:12px;margin:10px 0 5px;color:#c9efff}
#shopScreen.category-shop .shop-details p{font-size:11px;line-height:1.35;margin:4px 0}
#shopScreen.category-shop #shopSelectedType{color:#8ce9ff;text-transform:uppercase}
#shopScreen.category-shop #shopSelectedStats{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
#shopScreen.category-shop #shopSelectedStats>div{display:flex;justify-content:space-between;gap:8px}
#shopScreen.category-shop dt,#shopScreen.category-shop dd{font-size:12px;margin:0}
#shopScreen.category-shop dt{color:#a9cfdf}
#shopScreen.category-shop dd{font-weight:700}
#shopScreen.category-shop .shop-detail-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
#shopScreen.category-shop .shop-detail-actions>*{font-size:12px;padding:8px 12px;min-height:36px}
#shopScreen.category-shop .shop-category-tabs{display:flex;align-items:stretch;justify-content:center;gap:4px;overflow-x:auto;min-width:0}
#shopScreen.category-shop .shop-gallery{display:grid;grid-template-columns:32px minmax(0,1fr) 32px;gap:6px;min-height:0}
#shopScreen.category-shop #shopGrid{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;min-height:0;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#629bb1 #07141b;overscroll-behavior-x:contain;padding:0 2px 7px}
#shopScreen.category-shop .shop-category{flex:0 0 calc((100% - 30px)/4);min-width:230px;max-width:330px;display:grid;grid-template-rows:25px minmax(0,1fr) 18px;gap:4px;margin:0;padding:10px 12px 7px;scroll-snap-align:start;min-height:0;overflow:hidden;background:#061722df;border:1px solid transparent;border-image:url('/models/ui/shared-metal/frame-square.png') 60 fill / 13px / 0 stretch}
#shopScreen.category-shop .shop-category header{display:flex;align-items:center;justify-content:space-between;gap:4px}
#shopScreen.category-shop .shop-category h2{font-size:clamp(11px,1.1vw,16px);line-height:1;margin:0;text-transform:uppercase;white-space:nowrap}
#shopScreen.category-shop .shop-category header small{font-size:8px;white-space:nowrap}
#shopScreen.category-shop .shop-category-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:calc((100% - 8px)/3);gap:4px;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#70bbd5 #07141b;overscroll-behavior-y:contain}
#shopScreen.category-shop .shop-part,#shopScreen.category-shop .shop-empty-slot{min-width:0;min-height:0;margin:0;padding:0;display:block;position:relative;overflow:hidden;border:1px solid #38637b;border-radius:0;background:#081b27cc;color:#dff7ff;clip-path:none;box-shadow:none}
#shopScreen.category-shop .shop-part .model-thumb{display:block;width:100%;height:calc(100% - 17px);min-height:0;margin:0;background:none;border:0;aspect-ratio:auto}
#shopScreen.category-shop .model-thumb img{display:block;width:100%;height:100%;object-fit:contain}
#shopScreen.category-shop .shop-part>small{display:block;font-size:8px;line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
#shopScreen.category-shop .shop-part .model-thumb>span{font-size:9px}
#shopScreen.category-shop .shop-empty-slot{opacity:.35}
#shopScreen.category-shop .shop-category footer{font-size:9px;line-height:16px;color:#a9cfdf;text-align:center}
#shopScreen.category-shop .shop-gallery-arrow{border:0;border-image:none;background:none;color:#8feaff;font-size:45px;padding:0;min-width:0}
#shopScreen.category-shop .shop-gallery-arrow:disabled{opacity:.25}
@media(orientation:portrait){body[data-screen=shop] #shopScreen.category-shop{grid-template-rows:76px 36px minmax(0,1fr) 36px minmax(220px,34%)}#shopScreen.category-shop .section-heading{flex-wrap:wrap;gap:3px 8px;align-content:center}#shopScreen.category-shop h1{width:100%;font-size:20px}#shopScreen.category-shop .shop-filter-bar{margin-left:0;flex:1}#shopScreen.category-shop .shop-filter-bar button{padding:5px 8px;font-size:10px}#shopScreen.category-shop .shop-showcase{grid-template-columns:minmax(0,1fr) minmax(155px,.8fr);gap:3px}#shopScreen.category-shop .shop-details{padding:12px}#shopScreen.category-shop #shopSelectedStats{grid-template-columns:1fr}#shopScreen.category-shop .shop-details h2{font-size:16px}#shopScreen.category-shop .shop-details p{font-size:10px}#shopScreen.category-shop .shop-category-tabs{justify-content:flex-start}#shopScreen.category-shop .shop-category{flex-basis:260px}#shopScreen.category-shop #shopServicePanel:not([hidden]){top:120px}}
@media(orientation:landscape) and (max-height:650px){body[data-screen=shop] #shopScreen.category-shop{grid-template-rows:34px 30px minmax(40px,1fr) 30px minmax(120px,38%);gap:3px;padding-top:3px!important}#shopScreen.category-shop h1{font-size:20px}#shopScreen.category-shop .shop-services-heading{height:30px}#shopScreen.category-shop .shop-category-tabs button,#shopScreen.category-shop .shop-filter-bar button{min-height:28px;padding:3px 8px;font-size:10px}#shopScreen.category-shop .shop-category{min-width:210px;grid-template-rows:17px minmax(0,1fr) 12px;padding:6px 9px;gap:2px}#shopScreen.category-shop .shop-category h2{font-size:11px}#shopScreen.category-shop .shop-category footer{font-size:8px;line-height:11px}#shopScreen.category-shop .shop-part>small{font-size:7px;line-height:11px}#shopScreen.category-shop .shop-part .model-thumb{height:calc(100% - 11px)}#shopScreen.category-shop .shop-details{padding:9px 14px}#shopScreen.category-shop #shopServicePanel:not([hidden]){top:72px}}

#shopScreen.category-shop .shop-preview-fallback{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;pointer-events:none}
#shopScreen.category-shop #shopPreview:has(canvas:not([hidden])) .shop-preview-fallback{display:none}