/* "Fabricar" (systems/craft.js): your pieces, then the recipes in two tabs. */
.cr-pieces { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-bottom: 10px; }
.cr-piece { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #0b1424; border: 1px solid #2a3f6b; }
.cr-piece b { font-family: var(--pixel); font-size: 1.05rem; }
.cr-body { display: grid; gap: 12px; margin-top: 10px; }
.cr-section h3 { font-family: var(--pixel); font-size: 0.95rem; margin-bottom: 2px; }
.cr-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cr-search { width: min(240px, 100%); }
.cr-grid { display: grid; gap: 8px; margin-top: 6px; }
.cr-grid.disks { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cr-grid.megas { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.cr-grid.one { grid-template-columns: minmax(0, 260px); }
.cr-card { display: grid; gap: 6px; padding: 8px; border-radius: 12px; background: #0b1424; border: 1px solid #22355c; align-content: start; }
.cr-card.ready { border-color: #4a8a5c; box-shadow: 0 0 0 1px #4a8a5c55 inset; }
.cr-what { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cr-what .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cr-have { margin-left: auto; font-family: var(--pixel); font-size: 0.8rem; color: var(--muted); }
.cr-icon { width: 26px; height: 26px; image-rendering: pixelated; flex: none; }
.cr-icon.sm { width: 18px; height: 18px; }
.cr-icon.xs { width: 14px; height: 14px; margin-right: 3px; }
.cr-noicon { display: inline-block; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #e9d6ff, #7a4fd6 60%, #2b1a55); }
.cr-buy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
/* the gold a making costs: its own row, above the pieces and the button */
.cr-gold { grid-column: 1 / -1; order: -1; display: inline-flex; align-items: center; gap: 3px; color: #ffd23f; white-space: nowrap; }
.cr-gold img { width: 12px; height: 12px; }
.cr-gold.miss { color: #ff6b6b; }
.cr-bar { position: relative; height: 20px; border-radius: 6px; background: #050b16; border: 1px solid #22355c; overflow: hidden; }
.cr-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #2a5c3a, #4a8a5c); }
.cr-bar span { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; white-space: nowrap; font-size: 0.7rem; font-weight: 600; text-shadow: 0 1px 2px #000; }
.cr-mega-art { display: flex; align-items: flex-end; justify-content: center; gap: 4px; min-height: 44px; }
.cr-arrow { color: #c08bff; font-weight: 700; padding-bottom: 6px; }
.cr-name { font-family: var(--pixel); font-size: 0.85rem; text-align: center; }