/* 🛠️ คราฟ: the craft book inside the bag (js/craft-ui.js), the 🧺 finds pill, the "ทำอะไรได้บ้าง" card of a new find.
   Built on the shop's look (style.css .shop-*: cards, tabs, buttons) — only what the book needs on top. */
.craft-book { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* wrap, don't scroll: a hidden-scrollbar strip can't be scrolled with a mouse (same fix as .shop-tabs) */
.craft-cats { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 2px; }
.craft-cat {
  flex: none; background: var(--card-2); padding: 7px 12px; border-radius: 999px; font-weight: 700; font-size: 13px;
  color: var(--ink); white-space: nowrap;
}
.craft-cat.on { background: var(--accent); color: #fff; }
.craft-home {
  display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; line-height: 1.4;
  background: #eef7ff; color: #2f6ea3; border-radius: 12px; padding: 7px 10px;
}

.craft-row {
  display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 2px solid var(--line); border-radius: 16px;
  padding: 10px; min-width: 0;
}
.craft-row.can { border-color: #bfe5c6; }
.craft-row .cr-pic { flex: none; width: 58px; height: 58px; }
.cr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cr-title { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cr-title b { font-size: 14px; }
.cr-no { color: var(--muted); font-size: 11px; }
.cr-sell { margin-left: auto; background: #fff6d6; color: #7a5a00; border: 1px solid #e8c35a; border-radius: 10px; padding: 0 7px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } /* 💰 js/sellprice.js */
.cr-eff { color: var(--muted); font-size: 11px; line-height: 1.35; }
.cr-needs { display: flex; flex-wrap: wrap; gap: 6px; }
/* an ingredient: a big picture + มี/ต้องใช้, no name (the name shows on a tap: .cr-where .cr-name) */
.cr-need {
  display: flex; align-items: center; gap: 4px; padding: 3px 9px 3px 4px; border-radius: 14px; font-weight: 700;
  background: #eaf7ec; color: #2f7a3d; border: 2px solid transparent;
}
.cr-need.miss { background: #fff1eb; color: #c2562a; }
.cr-need.on { border-color: currentColor; }
.cr-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; font-size: 26px; line-height: 1; }
.cr-ico img { width: 34px; height: 34px; object-fit: contain; }
.cr-num { font-size: 14px; font-variant-numeric: tabular-nums; }
.cr-name { font-size: 13px; }
.cr-picks { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cr-picks .craft-cat { font-size: 11px; padding: 4px 9px; }
.cr-picknote { color: var(--muted); font-size: 10.5px; flex-basis: 100%; }
.cr-where {
  display: flex; flex-direction: column; gap: 3px; background: var(--card-2); border-radius: 12px; padding: 8px 10px;
  font-size: 12px; line-height: 1.4;
}
.cr-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cr-act button { border-radius: 999px; font-weight: 700; }
.cr-minus, .cr-plus { width: 30px; height: 30px; background: var(--card-2); font-size: 16px; }
.cr-minus:disabled, .cr-plus:disabled { opacity: .45; }
.cr-n { min-width: 28px; text-align: center; font-weight: 700; font-size: 13px; }
.cr-go { background: var(--accent); color: #fff; padding: 7px 14px; border-bottom: 3px solid var(--accent-dark); font-size: 13px; }
.cr-go:disabled { background: var(--card-2); color: var(--muted); border-color: var(--line); }
@media (max-width: 420px) {
  .craft-row { padding: 8px; gap: 8px; }
  .craft-row .cr-pic { width: 46px; height: 46px; font-size: 24px; }
}

/* 🆕 a thing found for the first time: what it makes (a card above the bottom bar, gone by itself) */
.craft-card-new {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 90px);
  z-index: 60; width: min(340px, calc(100vw - 32px)); background: var(--card); border-radius: 16px; box-shadow: var(--shadow);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; animation: ccn-in .25s ease;
}
.craft-card-new b { font-size: 14px; }
.craft-card-new small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.ccn-row { display: flex; gap: 6px; justify-content: flex-end; }
.ccn-go { background: var(--accent); color: #fff; font-weight: 700; padding: 6px 12px; border-radius: 999px; font-size: 13px; }
.ccn-x { background: var(--card-2); border-radius: 999px; width: 30px; }
@keyframes ccn-in { from { opacity: 0; transform: translate(-50%, 12px); } }

/* 🛠️ the crafted meals' effects on the pet panel */
.buff-note { color: #2f6ea3; font-size: 11px; line-height: 1.5; margin: 3px 0; }

/* 👒 แต่งตัว — the wardrobe (js/outfit-ui.js) */
.wd-body { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-width: 0; }
.wd-slot { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 10px; }
.wd-slot h3 { margin: 0; font-size: 14px; }
.wd-none { margin: 0; color: var(--muted); font-size: 12px; }
.wd-now { display: flex; align-items: center; gap: 8px; background: #eaf7ec; border-radius: 12px; padding: 6px 8px; }
.wd-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.wd-item { display: flex; align-items: center; gap: 4px; background: var(--card-2); border-radius: 12px; padding: 4px 6px 4px 8px; min-width: 0; }
.wd-put { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 2px 0; font: inherit; color: inherit; }
.wd-color { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; font-size: 16px; line-height: 1; padding: 0; }
.wd-pic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; font-size: 28px; line-height: 1; }
.wd-pic img { width: 42px; height: 42px; object-fit: contain; }
.wd-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wd-text b { font-size: 13px; }
.wd-text small { color: #2f6ea3; font-size: 11px; line-height: 1.3; }
.wd-off { flex: none; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 12px; }
.wd-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.wd-more p { margin: 0; color: var(--muted); font-size: 12px; }
.wd-gift { margin: 0; background: #fff7d6; color: #7a5a00; border-radius: 12px; padding: 8px 10px; font-size: 12px; line-height: 1.4; }
.wd-lock { margin: 0; flex: none; color: var(--muted); font-size: 11px; }