/* craft.js: build panel, placing bar, station info. Overlays the .field; the dock is untouched apart from one button. */
.craft-panel, .craft-info, .craft-placebar {
  position: absolute;
  z-index: 30;
  right: 0.75rem;
  top: 0.75rem;
  width: min(330px, calc(100% - 1.5rem));
  max-height: calc(100% - 1.5rem);
  overflow: auto;
  box-sizing: border-box;
  padding: 0.6rem 0.7rem 0.7rem;
  border-radius: var(--radius, 12px);
  border: 1px solid var(--line, rgba(236, 230, 218, 0.1));
  background: linear-gradient(180deg, rgba(12, 16, 22, 0.86), rgba(8, 11, 16, 0.92));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  color: var(--ink, #ece6da);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.72rem;
  line-height: 1.35;
}
.craft-panel[hidden], .craft-info[hidden], .craft-placebar[hidden] { display: none; }
.craft-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.craft-head b { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hot, #f0c27a); }
.craft-head .craft-count, .craft-head .craft-status { color: var(--mute, #8f97a3); flex: 1; }
.craft-info.is-running .craft-status { color: var(--glow, #b9f5b4); }
.craft-x {
  margin-left: auto; width: 1.7rem; height: 1.7rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line, rgba(236, 230, 218, 0.1)); background: transparent; color: var(--ink, #ece6da); font-size: 1rem; line-height: 1;
}
.craft-tip { margin: 0 0 0.5rem; color: var(--mute, #8f97a3); }
.craft-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
.craft-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; text-align: left; cursor: pointer;
  padding: 0.4rem 0.45rem; border-radius: 9px; font: inherit; color: inherit;
  border: 1px solid var(--line, rgba(236, 230, 218, 0.1));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}
.craft-card:hover:not([disabled]), .craft-card:focus-visible { border-color: rgba(240, 194, 122, 0.6); outline: none; }
.craft-card[disabled] { opacity: 0.45; cursor: not-allowed; }
.craft-card b { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; }
.craft-card.is-built b::after { content: ' ✓'; color: var(--glow, #b9f5b4); }
.craft-card small { color: var(--mute, #8f97a3); font-size: 0.62rem; }
.craft-cost { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.1rem; }
.craft-cost i { font-style: normal; font-size: 0.6rem; padding: 0.05rem 0.3rem; border-radius: 6px; background: rgba(224, 122, 122, 0.14); color: #f0b0a0; }
.craft-cost i.ok { background: rgba(185, 245, 180, 0.12); color: var(--glow, #b9f5b4); }
.craft-placebar { top: auto; bottom: auto; top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; overflow: visible; }
.craft-placebar .craft-place-msg { flex: 1 1 100%; color: var(--ink, #ece6da); }
.craft-placebar button, .craft-info button[data-remove], .craft-recipes button {
  font: inherit; font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer;
  padding: 0.3rem 0.55rem; border-radius: 8px; color: var(--ink, #ece6da);
  border: 1px solid var(--line, rgba(236, 230, 218, 0.1)); background: rgba(255, 255, 255, 0.04);
}
.craft-placebar button:hover, .craft-recipes button:hover:not([disabled]) { border-color: rgba(240, 194, 122, 0.6); }
.craft-only-touch { display: none; }
@media (hover: none), (pointer: coarse) { .craft-only-touch { display: inline-block; } }
.craft-shake { animation: craft-shake 0.3s; }
@keyframes craft-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.craft-prog { height: 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin: 0.15rem 0 0.4rem; }
.craft-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c9964a, #f3cf85); transition: width 0.25s linear; }
.craft-info.is-running .craft-prog i { background: linear-gradient(90deg, #e0702a, #ffd27a); box-shadow: 0 0 10px rgba(255, 160, 60, 0.6); }
.craft-now { margin: 0 0 0.45rem; color: var(--ink, #ece6da); min-height: 1.3em; }
.craft-recipes { list-style: none; margin: 0 0 0.45rem; padding: 0; display: grid; gap: 0.25rem; }
.craft-recipes li { display: flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.35rem; border-radius: 8px; background: rgba(255, 255, 255, 0.03); color: var(--mute, #8f97a3); }
.craft-recipes li.can { color: var(--ink, #ece6da); }
.craft-recipes li span { flex: 1; }
.craft-recipes li em { font-style: normal; color: var(--hot, #f0c27a); }
.craft-recipes li b { color: var(--glow, #b9f5b4); font-weight: 500; }
.craft-recipes li small { color: var(--mute, #8f97a3); }
.craft-recipes button { min-width: 2rem; padding: 0.2rem 0.4rem; }
.craft-recipes button[disabled] { opacity: 0.4; cursor: not-allowed; }
.craft-foot { display: flex; align-items: center; justify-content: space-between; color: var(--mute, #8f97a3); }
.craft-info button[data-remove] { color: #f0b0a0; }
.craft-dock-btn.is-on { border-color: rgba(240, 194, 122, 0.75) !important; color: var(--hot, #f0c27a) !important; }
@media (max-width: 700px) {
  .craft-panel, .craft-info, .craft-placebar { right: 0.5rem; left: 0.5rem; top: 0.5rem; width: auto; max-height: calc(100% - 1rem); font-size: 0.7rem; }
  .craft-tip { display: none; }
  .craft-placebar { max-height: none; }
  .craft-placebar button { padding: 0.45rem 0.7rem; }
  .craft-recipes button, .craft-x { min-height: 2rem; min-width: 2.2rem; }
  .craft-card small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .craft-shake { animation: none; } .craft-prog i { transition: none; } }
.craft-dock-btn { font-size: 0.9rem !important; }
.craft-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* Dock fit (the build icon sits in #hud-extras): tighten the torment buttons a
   touch on mid-width desktops so 'new gloop' stays on screen at 1280, and let
   the dock wrap below ~1200px instead of scrolling buttons off the edge. */
@media (min-width: 901px) and (max-width: 1440px) {
  .dock .acts button { padding-left: 0.5rem; padding-right: 0.5rem; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .dock { flex-wrap: wrap; row-gap: 0.4rem; overflow-x: hidden; }
}