/* the intro: the same amber hint patch as the camp hints, with the ticket icon */
.hub-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(240, 176, 48, 0.18);
  color: #3a2a1a;
  font-size: 13px;
  line-height: 1.3;
}
.hub-note .uii {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}
/* sections: the lighter patch with a dark rim and a stitched seam, as the cards in every other sheet */
.hub-upgrade, .hub-resource, .hub-shortage {
  padding: 12px 14px;
  margin: 12px 0;
  background: linear-gradient(180deg, #fffaf0, #f6ecd6);
  border: 2px solid #6b4a2a;
  border-radius: 16px 14px 17px 13px;
  outline: 1.5px dashed var(--stitch);
  outline-offset: -6px;
  box-shadow: 0 3px 0 rgba(58, 36, 20, 0.28), 0 6px 10px rgba(58, 36, 20, 0.08);
}
.hub-upgrade h4, .hub-resource h4 { margin-top: 0; }
.hub-requirements { padding-left: 20px; }
.hub-requirements li { margin: 6px 0; }
.hub-stock-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hub-stock {
  font: inherit;
  color: #3a2a1a;
  background: linear-gradient(180deg, #fffaf0, #f6ecd6);
  border: 2px solid #6b4a2a;
  border-radius: 12px;
  box-shadow: 0 2px 0 rgba(58, 36, 20, 0.28);
  min-height: 56px;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  text-align: left;
  cursor: pointer;
}
.hub-stock b, .hub-stock small { display: block; width: 100%; }
.hub-stock small { font-size: 11px; }
.hub-resource-label, .history-filters label { display: flex; flex-direction: column; gap: 5px; }
.hub-resource-label select, .history-filters select {
  min-height: 44px; max-width: 100%; padding: 6px; font: inherit; color: #493322;
  background: #fff4db; border: 1px solid #826342; border-radius: 8px;
}
.hub-chain-link { margin: 8px 0; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.hub-chain-link span { flex: 1; }
.hub-chain .btn, .hub-resource .btn, .hub-upgrade .btn { min-height: 44px; }
.park-history { margin: 16px 0; border-top: 2px solid #95734e; padding-top: 10px; }
.history-filters { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.history-filters label { flex: 1; min-width: 130px; }
#historyChart { width: 100%; height: 150px; background: #f6ecd8; border-radius: 8px; }
.history-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; }
.history-series { border-bottom: 3px solid #79411b; }
.hub-table-scroll { overflow-x: auto; max-width: 100%; }
.hub-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.hub-table th, .hub-table td { padding: 8px 6px; border-bottom: 1px solid #c9b698; text-align: right; white-space: nowrap; }
.hub-table th:first-child { text-align: left; }
.history-empty { padding: 14px; border: 1px dashed #95734e; border-radius: 8px; }
.hub-stock:focus-visible, .park-history select:focus-visible, .hub-resource-label select:focus-visible {
  outline: 3px solid #305b91; outline-offset: 2px;
}
@media (max-width: 600px) {
  .hub-stock-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-upgrade .row { flex-wrap: wrap; gap: 6px; }
  .hub-upgrade .row b { text-align: left; }
  .hub-chain-link { flex-wrap: wrap; }
}