/* Pokémon costumes: the right-click menu and its picker (systems/costume.js); the menu itself is the
   player menu's (social.css). */
.cos-menu.cos-picking { width: min(420px, calc(calc(100vw / var(--ui-zoom, 1)) - 16px)); }
.cos-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px;
  max-height: min(360px, 60vh); overflow-y: auto; padding: 2px;
}
.cos-pick {
  display: grid; justify-items: center; gap: 4px; padding: 6px 4px; border-radius: 10px;
  border: 1px solid var(--line); background: #0b1424; color: var(--text); font: inherit; font-size: 0.72rem;
  cursor: pointer; line-height: 1.15;
}
.cos-pick:hover { border-color: var(--accent); background: #12233d; }
.cos-pick.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.cos-pick span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; }
.cos-price { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); font-size: 0.78rem; }
.cos-price img { width: 13px; height: 13px; }

/* the VIP shop's Fantasias tab (vipshop.js): region tabs, the pokemon that have costumes, then one's catalog */
.cos-shop { display: grid; gap: 12px; }
.cos-intro {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 14px; border-radius: 12px;
  background: linear-gradient(90deg, #1f3460, #15213a); border: 1px solid #2c4472; font-size: 0.85rem;
}
.cos-intro-price { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-family: var(--pixel); color: var(--accent); }
.cos-regions { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: #0b1424; border: 1px solid var(--line); }
.cos-regions button {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px;
  border: 0; border-radius: 9px; background: none; color: var(--muted); font-family: var(--pixel); font-size: 0.95rem; cursor: pointer;
}
.cos-regions button small { padding: 1px 6px; border-radius: 999px; background: #ffffff12; font-family: inherit; font-size: 0.72rem; }
.cos-regions button:hover { color: var(--text); background: #12233d; }
.cos-regions button.on { background: #1f3460; color: var(--accent); }
.cos-regions button.shiny { color: #e6c44a; }
.cos-regions button.shiny.on { background: #3a3212; color: #ffd23f; }
.cos-shop-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cos-shop-tools .input { min-width: 0; width: 220px; }
.cos-species-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.cos-empty { grid-column: 1 / -1; padding: 18px 0; text-align: center; }
.cos-species {
  position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 6px 10px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; cursor: pointer;
}
.cos-species:hover { border-color: var(--accent); background: #12233d; transform: translateY(-1px); }
.cos-species.has { border-color: #2f6b45; }
.cos-num { position: absolute; top: 6px; left: 8px; color: var(--muted); font-size: 0.68rem; }
.cos-art { display: grid; place-items: end center; width: 84px; height: 80px; border-radius: 10px; background: radial-gradient(circle at 50% 70%, #2a3550 0, transparent 70%); }
.cos-species b { font-family: var(--pixel); font-size: 0.95rem; text-align: center; }
.cos-meta { color: var(--muted); font-size: 0.72rem; }
.cos-species.shiny { border-color: #6b5a1f; background: linear-gradient(180deg, #2a2610, var(--card)); }
.cos-species.shiny b { color: #ffd23f; }
.cos-have { color: #4cc96a; font-size: 0.75rem; }
.cos-cat-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cos-cat-head h3 { font-family: var(--pixel); font-size: 1.1rem; }
.cos-cat-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.cos-cat-buy { display: grid; gap: 8px; justify-items: start; min-width: 160px; }
.cos-cat-name { font-family: var(--pixel); font-size: 1.05rem; color: var(--accent); }
.cos-cat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }

/* the VIP shop's Roupas tab (vipshop.js): the trainer outfits, same cards as the profile's */
.fit-shop { display: grid; gap: 12px; }
.fit-shop-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.fit-shop-head .pf-tools { margin-left: auto; }
.pf-card .cos-price { font-size: 0.72rem; }

/* the picker's costume picked: walking, with its price and button */
.cos-buy { display: flex; align-items: center; gap: 12px; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: #0b1424; border: 1px solid #3d5a96; }
.cos-buy-art { display: grid; place-items: end center; width: 84px; height: 80px; flex: none; border-radius: 8px; background: radial-gradient(circle at 50% 70%, #2a3550 0, transparent 70%); }
.cos-buy-info { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.cos-buy-info b { font-family: var(--pixel); color: var(--accent); }
.cos-buy-btn { display: inline-flex; align-items: center; gap: 5px; }
.cos-buy-btn img { width: 14px; height: 14px; }
.cos-short { color: #ff9a9a; font-size: 0.8rem; }