/* A bronze field-outfitter counter with an inspection bay beside the stock. */
#app[data-view="supply"] #supply, #app[data-view="characters"] #supply {
  --trail-accent: #e5b97d;
  --supply-trim: #987456;
  --supply-copper: #f4c488;
  --supply-state: #e1af79;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  align-items: safe center;
  padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #8f6a4c #192023;
  background: radial-gradient(ellipse at 50% 22%, #4430229c, #10171ae8 75%);
}
#supply .supply-panel {
  width: min(100%, 1120px);
  min-width: 0;
  padding: clamp(12px, 3vw, 31px);
}
#supply .shop-header {
  align-items: center;
  gap: clamp(9px, 2vw, 22px);
  padding-bottom: 15px;
  background: linear-gradient(90deg, #e4b779 0 40px, #78624f 40px 67%, #493e33 67% 85%, transparent) left bottom / 100% 1px no-repeat;
}
#supply .supply-heading { min-width: 0; }
#supply-title { font-size: clamp(31px, 6vw, 57px); }
#supply .shop-header .eyebrow { margin-bottom: 6px; color: var(--supply-copper); }
#supply .shop-intro { color: #d3cbc1; font-size: clamp(11px, 1.5vw, 14px); line-height: 1.3; }
#supply .shop-bank {
  flex: 0 0 auto;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--supply-trim);
  border-radius: 2px 9px 2px 9px;
  background: linear-gradient(135deg, #37291e, #171b1d 76%);
  text-align: right;
}
#supply .shop-bank .micro {
  color: #e3c6a0;
  white-space: nowrap;
}
#supply .shop-bank strong {
  display: inline-flex;
  margin-top: 3px;
  font: 800 clamp(20px, 3.8vw, 33px)/1.05 var(--mono);
  color: #ffdda1;
}
#supply .bank-tokens .token-mark { width: 13px; height: 13px; flex-basis: 13px; }
#supply .supply-filters {
  grid-template-columns: minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);
  gap: 9px;
  margin: 14px 0;
  padding: 10px;
  border: 1px solid #5c5044;
  border-left: 2px solid var(--supply-trim);
  border-radius: 0 8px 2px 0;
  background: linear-gradient(105deg, #33291f, #22282a 65%);
}
#supply .supply-filters label {
  min-width: 0;
  color: #ead3b5;
  font-size: 10px;
}
#supply .supply-filter { display: grid; align-content: start; gap: 5px; min-width: 0; }
#supply .supply-filters input, #supply .supply-filters select {
  min-height: 44px;
  background: #161d20;
  border-color: #715e4d;
  border-radius: 2px 7px 2px 7px;
}
#supply .supply-filters input::placeholder { color: #bcb0a0; }

#supply .catalog-layout {
  grid-template-columns: minmax(0, 1fr) minmax(205px, 28%);
  gap: clamp(10px, 2vw, 20px);
}
#supply .supply-stock { min-width: 0; }
#supply-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
#supply .catalog-card {
  min-height: 90px;
  gap: 4px;
  padding: 6px 7px 7px;
  border: 1px solid #59646a;
  border-bottom: 2px solid #3d5055;
  border-radius: 2px 9px 2px 9px;
  background:
    linear-gradient(90deg, var(--supply-state), transparent) left top / 33% 2px no-repeat,
    linear-gradient(140deg, #303535, #182327 82%);
}
#supply [data-ownership="owned"] { --supply-state: #a7d3d2; }
#supply [data-ownership="equipped"] { --supply-state: #e1f69b; }
#supply .catalog-card[aria-pressed="true"] {
  border-color: #dbb681;
  border-bottom-color: #e1b07b;
  background:
    linear-gradient(90deg, #ffd99e, transparent) left top / 72% 2px no-repeat,
    linear-gradient(140deg, #524331, #243033 82%);
}
#supply .catalog-card:hover { border-color: #c7a070; }
#supply .catalog-card .supply-art {
  min-height: 50px;
  border: 0;
  border-radius: 0 6px 0 6px;
  background: radial-gradient(ellipse at 50% 70%, #b5ab7a38, transparent 68%), #151f23;
}
#supply .catalog-card .supply-art svg { width: min(58px, 100%); height: 44px; }
#supply .catalog-card strong {
  color: #fff2df;
  font-size: 12px;
  font-weight: 740;
}
#supply .catalog-card small {
  margin-top: auto;
  padding-top: 2px;
  color: var(--supply-state);
  overflow-wrap: anywhere;
}
#supply .supply-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 20px 12px;
  border: 1px dashed #785f4a;
  color: #d8c9b7;
  background: #192124;
}
#supply .catalog-pages {
  justify-content: space-between;
  gap: 6px;
  margin: 10px 0 0;
  padding: 4px;
  border-top: 1px solid #61503e;
  text-align: center;
}
#supply .catalog-pages .btn { min-width: 44px; min-height: 44px; }
#supply-count { color: #e2ccb1; letter-spacing: .045em; }
#supply .supply-preview {
  position: sticky;
  top: max(10px, env(safe-area-inset-top));
  min-width: 0;
  gap: 8px;
  padding: 10px;
  border: 1px solid #927256;
  border-radius: 2px 13px 2px 10px;
  background: linear-gradient(151deg, #352a24, #182428 70%);
}
#supply .supply-preview-heading {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  color: #f2c791;
}
#supply .supply-preview-heading .micro { font-size: 9px; letter-spacing: .09em; }
#preview-category { color: #e2d1ba; overflow-wrap: anywhere; text-transform: uppercase; }
#supply #preview-art {
  min-height: 142px;
  border: 1px solid #6e59456b;
  border-radius: 0 9px 0 9px;
  background:
    repeating-linear-gradient(90deg, transparent 0 19px, #f4c48818 20px 21px) bottom left / 100% 4px no-repeat,
    radial-gradient(ellipse at 52% 75%, #98795578, transparent 70%),
    #172124;
}
#supply .supply-try-on { width: min(100%, 186px); }
#supply #preview-state {
  width: fit-content;
  padding: 4px 6px;
  border-inline-start: 2px solid var(--supply-state);
  color: var(--supply-state);
  background: #141d21;
}
#supply #preview-name { color: #fff2df; overflow-wrap: anywhere; }
#supply #preview-description { color: #e0d4c2; overflow-wrap: anywhere; }
#supply .supply-preview .btn {
  min-width: 0;
  min-height: 44px;
  border-radius: 2px 8px 2px 8px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
#supply .supply-footer {
  flex-direction: row;
  align-items: center;
  min-height: 54px;
  margin-top: 13px;
  padding-top: 9px;
  border-color: #725b46;
}
#supply .supply-footer .btn { flex: 0 0 auto; }
#supply-feedback { color: #e8d7c1; }
#supply .supply-character-select { display: grid; justify-content: stretch; gap: 3px; width: 100%; padding: 7px 9px; text-align: left; border-color: #967755; background: linear-gradient(115deg, #493a2a, #203136); }
#supply .supply-character-select > span { color: #e6c59e; font: 750 9px/1.25 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
#supply .supply-character-select > strong { display: flex; justify-content: space-between; gap: 9px; font-size: 14px; }
#supply .supply-character-select > strong::after {
  content: '';
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  background: #dfefac;
  clip-path: polygon(0 41%, 65% 41%, 45% 21%, 58% 8%, 100% 50%, 58% 92%, 45% 79%, 65% 59%, 0 59%);
}
#supply-characters.overlay { position: fixed; inset: 0; z-index: 6; min-height: 0; height: 100vh; height: 100dvh; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: radial-gradient(ellipse at 50% 35%, #253331bd, #071016ed 85%); }
#supply-characters .supply-character-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(100%, 850px); max-height: 100%; min-height: 0; padding: 0; border-color: #a08660; border-radius: 3px 18px 3px 18px; background: linear-gradient(135deg, #2a302c, #14242d 76%); overflow: hidden; }
.supply-character-header { padding: clamp(15px, 3vw, 26px) clamp(16px, 3vw, 28px) 15px; border-bottom: 1px solid #6b6d52; background: linear-gradient(90deg, #d9bc82 0 58px, transparent 58px) left top / 100% 3px no-repeat, linear-gradient(115deg, #403c2d, #1b3238); }
.supply-character-header .eyebrow { margin: 0 0 5px; color: #e9c48e; }
#supply-character-title { font-size: clamp(25px, 4vw, 40px); line-height: 1.12; }
#supply-character-help { margin: 8px 0 0; color: #d1d8c6; font-size: 12px; }
.supply-character-body { min-height: 0; overflow-y: auto; padding: 15px clamp(13px, 2.5vw, 25px); scrollbar-width: thin; scrollbar-color: #8a9c76 #14232b; overscroll-behavior: contain; }
#supply-character-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.supply-character-card { display: grid; justify-items: center; align-content: start; gap: 5px; min-width: 0; min-height: 220px; padding: 9px 8px 13px; border: 1px solid #526d6d; border-radius: 2px 12px 2px 12px; background: linear-gradient(145deg, #2b3f42, #15252d 80%); color: #eff3e4; }
.supply-character-card canvas { display: block; width: min(100%, 108px); height: auto; }
.supply-character-card strong { font-size: 15px; line-height: 1.2; }
.supply-character-card small { color: #bdceca; font-size: 10px; line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
.supply-character-state { color: #d8c294; font: 750 9px/1.25 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.supply-character-card[aria-pressed='true'] { border-color: #d4efa4; background: linear-gradient(145deg, #465a3d, #223a36 80%); box-shadow: inset 0 -3px #c6e79e; }
.supply-character-card[aria-pressed='true'] .supply-character-state { color: #e7f6bb; }
.supply-character-card:hover:not(:disabled) { border-color: #a5c7af; }
.supply-character-card:is(:focus-visible, [data-pad-focus]) { outline: 3px solid #e8f8ac; outline-offset: 2px; }
.supply-character-footer { padding: 12px clamp(15px, 3vw, 26px) 16px; border-top: 1px solid #6e7259; background: #14252b; }
#supply-character-choice { margin: 0 0 7px; color: #d3eaa9; }
#supply-character-feedback { margin: 0; color: #f0c69b; font-size: 12px; }
#supply-character-feedback:empty { display: none; }
.supply-character-footer > div { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.supply-character-footer .btn { min-height: 46px; }
@media (pointer: fine) { #supply-characters[data-layer-active] { backdrop-filter: blur(4px) saturate(.75); } }
@media (prefers-reduced-motion: no-preference) { #supply-characters[data-layer-active] > .panel { animation: popup-enter .2s cubic-bezier(.2,.75,.28,1) both; } }
@media (max-width: 650px) { #supply-character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .supply-character-card { min-height: 200px; } .supply-character-card canvas { width: min(100%, 94px); } .supply-character-footer > div .btn { flex: 1; } }

@media (max-width: 860px) {
  #supply-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  #supply .supply-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 6px;
    gap: 6px;
  }
  #supply .catalog-layout { grid-template-columns: minmax(0, 1fr) minmax(109px, .73fr); }
  #supply-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #supply .shop-header { padding-bottom: 11px; }
  #supply .shop-header .eyebrow { font-size: 8px; }
  #supply .shop-bank .micro { font-size: 8px; }
  #supply .supply-preview { padding: 7px; gap: 6px; }
  #supply #preview-art { min-height: 76px; }
  #supply .supply-try-on { width: min(100%, 128px); }
  #supply .supply-preview .btn { padding-inline: 4px; }
}
@media (max-width: 400px) {
  #supply-title { font-size: clamp(26px, 8vw, 33px); }
  #supply .shop-bank { padding: 7px 5px; }
  #supply .catalog-layout { grid-template-columns: minmax(0, 1fr) minmax(110px, .74fr); gap: 8px; }
  #supply .catalog-card { min-height: 76px; padding: 4px; }
  #supply .catalog-card .supply-art { min-height: 35px; }
  #supply .catalog-card .supply-art svg { height: 33px; }
  #supply .catalog-card strong { font-size: 11px; }
  #supply .catalog-card small { font-size: 8px; }
  #supply .catalog-pages { gap: 4px; padding-inline: 0; }
  #supply .catalog-pages .btn { padding-inline: 5px; }
  #supply-count { font-size: 8px; }
  #supply .supply-preview-heading .micro { font-size: 8px; }
}
@media (max-height: 460px) and (orientation: landscape) {
  #supply .supply-preview { position: relative; top: auto; }
}