/* Held items (systems/helds.js): the "Helds" tab of Fabricar and the panel on a pokémon. */
.held-img { image-rendering: pixelated; flex: none; }
.held-body { display: grid; gap: 12px; }
/* what you have to spend */
.held-wallet { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.held-coin { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px; background: #0b1424; border: 1px solid var(--line); }
.held-coin div { display: grid; line-height: 1.1; }
.held-coin b { font-family: var(--pixel); font-size: 1.25rem; color: #ffb74d; }
.held-coin b.gold { color: #ffd23f; }
.held-coin span { font-size: 0.72rem; color: var(--muted); }
.held-wallet-src { display: grid; gap: 2px; margin-left: auto; max-width: 320px; text-align: right; }
.held-wallet-src b { font-size: 0.78rem; color: var(--accent); }
/* a section */
.held-panel { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.held-panel h3 { font-family: var(--pixel); font-size: 1.05rem; }
/* making one */
.held-maker { display: grid; grid-template-columns: minmax(200px, 250px) 1fr; gap: 12px; }
.held-kinds { display: grid; gap: 4px; align-content: start; }
.held-kind { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; border: 1px solid transparent; background: #0b1424; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.held-kind span { display: grid; line-height: 1.2; }
.held-kind b { font-family: var(--pixel); font-size: 0.9rem; }
.held-kind small { font-size: 0.7rem; }
.held-kind:hover { border-color: #3d5a96; }
.held-kind.on { border-color: var(--accent); background: #1f3460; }
.held-detail { display: grid; gap: 10px; align-content: start; padding: 12px; border-radius: 12px; background: #0b1424; border: 1px solid #ffffff10; }
.held-detail-head { display: flex; align-items: center; gap: 12px; }
.held-detail-art { display: grid; place-items: center; width: 72px; height: 72px; flex: none; border-radius: 50%; background: radial-gradient(circle, #34477a 0, transparent 70%); }
.held-detail-head h4 { font-family: var(--pixel); font-size: 1.2rem; color: var(--accent); }
.held-ladder { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.held-step { display: grid; justify-items: center; gap: 1px; padding: 6px 2px; border-radius: 8px; background: #121c33; }
.held-step b { font-family: var(--pixel); font-size: 0.72rem; color: var(--muted); }
.held-step span { font-family: var(--pixel); font-size: 0.85rem; }
.held-cost { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.held-price { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: #121c33; font-family: var(--pixel); font-size: 0.85rem; }
.held-price.short { color: #ff8a8a; }
.held-go { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.held-go:disabled { background: #1a2337; border-color: var(--line); color: var(--muted); opacity: 1; }
/* fusing */
.held-fuse { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: #0b1424; }
.held-fuse-in { display: flex; gap: 6px; }
.held-slot { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; border: 1px dashed #3d5a96; background: #121c33; color: var(--muted); font-size: 1.2rem; }
.held-slot.mini { width: 26px; height: 26px; font-size: 0.8rem; }
.held-arrow { color: var(--accent); font-size: 1.4rem; }
.held-odds { display: grid; gap: 4px; }
.held-odd { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; }
.held-odd.up span { color: #6fe08f; font-family: var(--pixel); }
.held-chances { display: flex; flex-wrap: wrap; gap: 6px; }
.held-chance { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #0b1424; border: 1px solid var(--line); font-family: var(--pixel); font-size: 0.75rem; color: var(--muted); }
.held-chance b { color: var(--text); }
.held-chance.on { border-color: var(--accent); color: var(--accent); }
/* your helds */
.held-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.held-card { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 6px; border-radius: 10px; background: #0e1830; border: 1px solid var(--line); color: var(--text); font: inherit; text-align: center; cursor: pointer; }
.held-card:hover:not(:disabled) { border-color: #5a78b8; }
.held-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px #ffd23f44; }
.held-card.off { opacity: 0.45; }
.held-card:disabled { cursor: default; }
.held-card b { font-family: var(--pixel); font-size: 0.85rem; }
.held-card .small { font-size: 0.7rem; }
.held-on { position: absolute; top: 4px; right: 6px; font-size: 0.62rem; color: #6fe08f; }
.held-sub { font-family: var(--pixel); font-size: 0.95rem; margin-top: 4px; }
.held-empty { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--line); }
@media (max-width: 700px) {
  .held-maker { grid-template-columns: 1fr; }
  .held-wallet-src { margin-left: 0; text-align: left; }
}
/* on the pokémon: the badge on its card, and the "Held" panel below the team */
.held-badge { display: inline-flex; align-items: center; gap: 4px; justify-self: center; padding: 2px 8px 2px 4px; border-radius: 999px; background: #0b1424; border: 1px solid #ffffff14; font-family: var(--pixel); font-size: 0.72rem; }
.held-box { display: grid; gap: 8px; }
.held-current { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: #0b1424; border: 1px solid var(--line); }
.held-row-info { display: grid; min-width: 0; flex: 1; }
.held-row-info b { font-family: var(--pixel); }
.held-choose { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.held-pick { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 10px; border: 1px solid var(--line); background: #0e1830; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.held-pick:hover { border-color: var(--accent); background: #12233d; }
.held-pick-info { display: grid; }
.held-pick-info b { font-family: var(--pixel); font-size: 0.85rem; }
.held-pick-info .small { font-size: 0.7rem; }