/* Workshop overview: independent of Inventory and Burrow styles. */
#shop-screen .workshop-heading,
#shop-screen .workshop-resources,
#shop-screen .workshop-tabs,
#shop-screen .workshop-recipes-list { width: 100%; max-width: 560px; box-sizing: border-box; flex-shrink: 0; }
#shop-screen .workshop-heading h1 { margin: 0 0 6px; }
#shop-screen .workshop-heading p { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: #c1cbdd; }
#shop-screen .workshop-resources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(8,13,28,.78); }
#shop-screen .workshop-resources > div { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
#shop-screen .workshop-resources span { font-size: 14px; color: #c1cbdd; flex-shrink: 0; }
#shop-screen .workshop-resources b { min-width: 0; font-size: clamp(12px, 3.8vw, 16px); font-variant-numeric: tabular-nums; color: #e0f5b9; white-space: nowrap; }
#shop-screen .workshop-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#shop-screen .workshop-tab { min-height: 44px; height: auto; padding: 8px 3px; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; background: #172237; color: #fff; font-size: 12px; cursor: pointer; }
#shop-screen .workshop-tab.active-tab { background: #c7f77c; border-color: #c7f77c; color: #17230c; }
#shop-screen .workshop-recipes-list { display: grid; grid-auto-rows: 1fr; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 10px; margin-bottom: 8px; }
.workshop-recipe-card { min-width: 0; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 8px; border: 1px solid rgba(255,255,255,.22); border-radius: 14px; background: rgba(8,13,28,.92); color: #fff; font: inherit; text-align: center; cursor: pointer; overflow-wrap: anywhere; }
.workshop-recipe-image { display: block; width: 100%; height: 140px; object-fit: contain; flex-shrink: 0; }
.workshop-recipe-placeholder { height: 140px; display: grid; place-items: center; font-size: 40px; }
#shop-screen .workshop-recipe-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 1.3; font-weight: 700; height: 2.6em; flex-shrink: 0; }
#shop-screen .workshop-card-meta { font-size: 11px; line-height: 1.4; min-height: 1.4em; }
.workshop-recipe-rarity { font-size: 11px; font-weight: 600; color: #c1cbdd; }
.workshop-recipe-rarity[data-rarity="RARE"] { color: #91caff; }
.workshop-recipe-rarity[data-rarity="EPIC"] { color: #d4adff; }
.workshop-recipe-rarity[data-rarity="LEGENDARY"] { color: #ffda87; }
.workshop-recipe-rarity[data-rarity="MYTHIC"] { color: #ffa7c6; }
.workshop-recipe-rarity[data-rarity="GENESIS"] { color: #93f0e4; }
.workshop-recipe-ownership { font-size: 11px; color: #c1cbdd; }
#shop-screen .workshop-short-effect { height: 2.8em; flex-shrink: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 12px; line-height: 1.4; color: #e0f5b9; }
/* Reserve a narrow badge strip so the full-size image stays unobstructed. */
.workshop-card-media { position: relative; display: block; width: 100%; padding-top: 14px; flex-shrink: 0; }
.workshop-card-state { position: absolute; top: 0; right: 0; padding: 1px 5px; border-radius: 5px; font-size: 9px; line-height: 12px; font-weight: 700; white-space: nowrap; color: #c1cbdd; background: #293446; }
.workshop-state-available { border-color: #789b51; background: rgba(24,41,30,.94); }
.workshop-state-available .workshop-card-state { color: #d8f9b1; background: #29452a; }
.workshop-state-owned .workshop-card-state { color: #c7f77c; background: #223e2b; }
.workshop-state-locked { background: rgba(16,22,34,.9); border-color: #485365; }
.workshop-state-locked .workshop-recipe-image { opacity: .82; }
.workshop-state-locked .workshop-short-effect { color: #c6cedc; }
.workshop-state-locked .workshop-card-state { color: #d2d8e3; }
.workshop-loading, .workshop-empty, .workshop-error { grid-column: 1 / -1; padding: 20px; border-radius: 14px; background: rgba(8,13,28,.8); color: #d2d8e3; text-align: center; font-size: 13px; }
.workshop-recipe-card:focus-visible,
#shop-screen .workshop-tab:focus-visible,
.workshop-detail button:focus-visible { outline: 3px solid #d8ff92; outline-offset: 2px; }
#shop-screen .workshop-recipe-image,
#shop-screen .workshop-recipe-placeholder { height: 156px; object-fit: contain; }
/* Native details dialog follows the Inventory mobile safe-area pattern. */
.workshop-detail {
    box-sizing: border-box;
    --workshop-viewport-height: 100vh;
    --workshop-top-gap: max(12px, env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px));
    --workshop-bottom-gap: max(12px, env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px));
    --workshop-side-gap: max(12px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-left, 0px), var(--tg-safe-area-inset-right, 0px), var(--tg-content-safe-area-inset-left, 0px), var(--tg-content-safe-area-inset-right, 0px));
    position: fixed;
    inset: var(--workshop-top-gap) 0 calc(100% - var(--tg-viewport-height, var(--workshop-viewport-height)) + var(--workshop-bottom-gap));
    margin: auto;
    width: min(calc(100% - 2 * var(--workshop-side-gap)), 500px);
    max-width: none;
    max-height: calc(var(--tg-viewport-height, var(--workshop-viewport-height)) - var(--workshop-top-gap) - var(--workshop-bottom-gap));
    padding: 14px;
    border: 1px solid #71805e;
    border-radius: 18px;
    background: #101a2a;
    color: #fff;
    overflow: hidden;
    overscroll-behavior: contain;
}
@supports (height: 100dvh) { .workshop-detail { --workshop-viewport-height: 100dvh; } }
.workshop-detail[open] { display: flex; flex-direction: column; }
.workshop-detail-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.workshop-detail::backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.75); }
body:has(#workshop-detail[open]), html:has(#workshop-detail[open]), body:has(#workshop-detail[open]) .screen { overflow: hidden; }
.workshop-detail-close { flex-shrink: 0; align-self: flex-end; min-height: 44px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid #63718a; border-radius: 10px; background: #26354a; color: #fff; cursor: pointer; }
.workshop-detail .workshop-recipe-image { width: 180px; height: 180px; max-width: 100%; margin: 0 auto 12px; }
.workshop-detail h2 { margin: 0 0 8px; font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; }
.workshop-description { font-size: 14px; line-height: 1.5; color: #dce3ee; }
.workshop-price { padding: 12px; border-radius: 10px; background: rgba(255,255,255,.05); font-size: 13px; }
.workshop-recipe-cost { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.workshop-recipe-cost span { display: flex; flex-direction: column; gap: 4px; font-size: 11px; overflow-wrap: anywhere; }
.workshop-recipe-cost b { font-size: 17px; font-variant-numeric: tabular-nums; }
.workshop-requirements { margin: 14px 0; font-size: 13px; line-height: 1.5; }
.workshop-requirements h3 { font-size: 14px; margin: 0 0 8px; }
.workshop-requirements p, .workshop-recipe-status p { margin: 6px 0; }
.workshop-requirement-satisfied, .workshop-free { color: #c7f77c; }
.workshop-cost-missing, .workshop-requirement-locked, .workshop-recipe-status { color: #ffb4b4; }
.workshop-recipe-status { font-size: 13px; line-height: 1.5; }
.workshop-craft-button { width: 100%; min-height: 44px; margin: 12px 0 0; padding: 12px; border: 0; border-radius: 12px; background: #c7f77c; color: #17230c; font-size: 14px; font-weight: 700; cursor: pointer; }
.workshop-craft-button:disabled { background: #334155; color: #c1cbdd; cursor: not-allowed; }
@media (max-width: 360px) {
    #shop-screen .workshop-recipes-list { gap: 8px; }
    #shop-screen .workshop-recipe-image, #shop-screen .workshop-recipe-placeholder { height: 128px; }
    .workshop-recipe-card { padding: 4px 7px; }
    #shop-screen .workshop-resources { gap: 4px; padding: 8px 6px; }
}