/* W14 UI: build shop (#buildPanel) + rank / investments (#rankPanel). Palette matches ui.css:
   panel #3d3129, border #6b4a34, gold #e8b84b, text #f2e9d8, muted #c9b393, dim #bdb09c, green #4a7a4f, red #c9522f. */
#buildPanel, #rankPanel { margin: 10px 0; }
.b3-wrap, .r3-wrap { display: flex; flex-direction: column; gap: 6px; }
.b3-card, .r3-card { background: #3d3129; border: 2px solid #6b4a34; border-radius: 6px; padding: 10px; }
.b3-h { font-size: 11px; color: #c9b393; margin: 10px 0 2px; text-transform: uppercase; letter-spacing: 0.5px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.b3-h .hint, .b3-book .hint { text-transform: none; letter-spacing: 0; color: #bdb09c; font-size: 10px; font-weight: normal; text-align: right; }
.b3-dim { color: #bdb09c; font-weight: normal; font-size: 11px; }

/* shared button: >= 44px, price/reason on a second line */
.b3-btn { min-width: 76px; min-height: 44px; padding: 5px 8px; font: inherit; font-size: 12px; font-weight: bold; line-height: 1.15;
  color: #f2e9d8; background: #2b2320; border: 2px solid #6b4a34; border-radius: 6px; flex-shrink: 0; }
.b3-btn small { display: block; font-size: 10px; font-weight: normal; opacity: 0.9; white-space: nowrap; }
.b3-btn.gold { background: #e8b84b; color: #2b2320; }
.b3-btn.green { background: #3f6b44; color: #f2e9d8; }
.b3-btn:active:not(:disabled) { transform: scale(0.96); }
.b3-btn:disabled { background: #2b2320; color: #bdb09c; border-color: #5a5048; cursor: not-allowed; }
.b3-btn:focus-visible, .b3-tabs button:focus-visible, .r3-more:focus-visible { outline: 2px solid #f6ecd9; outline-offset: 1px; }

/* shop tier */
.b3-tier-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.b3-title { font-size: 15px; font-weight: bold; }
.b3-sub { font-size: 11px; color: #c9b393; margin-top: 2px; line-height: 1.4; }
.b3-sub b { color: #f2e9d8; }
.b3-tip, .r3-tip { margin: 8px 0 0; font-size: 11px; color: #c9b393; line-height: 1.4; background: #2b2320; border-left: 3px solid #4a7a4f;
  padding: 6px 8px; border-radius: 0 4px 4px 0; }
.r3-tip { margin: 0; border-left-color: #e8b84b; }
.b3-tip b { color: #f2e9d8; }

/* tabs */
.b3-tabs { display: flex; gap: 4px; margin-top: 8px; }
.b3-tabs button { flex: 1; min-height: 44px; font: inherit; font-size: 12px; font-weight: bold; color: #c9b393; background: #2b2320;
  border: 2px solid #6b4a34; border-radius: 6px 6px 0 0; padding: 4px 2px; }
.b3-tabs button small { font-weight: normal; color: #bdb09c; }
.b3-tabs button[aria-selected="true"] { background: #e8b84b; color: #2b2320; border-color: #e8b84b; }
.b3-tabs button[aria-selected="true"] small { color: #5a4030; }

/* item cards */
.b3-list { display: flex; flex-direction: column; gap: 6px; }
.b3-item { display: flex; align-items: center; gap: 8px; background: #3d3129; border: 2px solid #6b4a34; border-radius: 6px; padding: 6px 8px; }
.b3-item.poor .b3-name { color: #c9b393; }
.b3-ico { width: 44px; min-height: 44px; display: grid; place-items: center; background: #d8c39a; border: 2px solid #6b4a34;
  border-radius: 4px; flex-shrink: 0; overflow: hidden; }
.b3-spr { image-rendering: pixelated; image-rendering: crisp-edges; width: 40px; height: 40px; display: block; max-width: 40px; object-fit: contain; }
.b3-body { flex: 1; min-width: 0; }
.b3-name { font-size: 13px; font-weight: bold; }
.b3-stats { display: flex; flex-wrap: wrap; gap: 3px; margin: 3px 0; }
.b3-stats span { font-size: 10px; background: #2b2320; border: 1px solid #6b4a34; border-radius: 3px; padding: 1px 4px; color: #d8c9ae;
  font-variant-numeric: tabular-nums; }
.b3-stats span.g { color: #8fd18f; border-color: #4a7a4f; }
.b3-stats span.r { color: #e39a80; }
.b3-line { font-size: 10px; color: #c9b393; line-height: 1.35; }
.b3-combo b { color: #e8b84b; }
.b3-combo i { color: #bdb09c; }
.b3-locked { display: flex; flex-wrap: wrap; gap: 4px; font-size: 10px; color: #bdb09c; }
.b3-locked span { border: 1px dashed #5a5048; border-radius: 3px; padding: 2px 5px; }

/* combo book */
.b3-book { background: #3d3129; border: 2px solid #6b4a34; border-radius: 6px; margin-top: 4px; }
.b3-book summary { min-height: 44px; display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 13px; cursor: pointer; list-style: none; }
.b3-book summary::-webkit-details-marker { display: none; }
.b3-book summary::before { content: '▸'; color: #e8b84b; }
.b3-book[open] summary::before { content: '▾'; }
.b3-book summary b { color: #e8b84b; }
.b3-book summary .hint { margin-left: auto; }
.b3-book ul { list-style: none; margin: 0; padding: 0 8px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.b3-book li { background: #2b2320; border: 1px solid #6b4a34; border-radius: 4px; padding: 4px 6px; font-size: 10px; line-height: 1.3; }
.b3-book li b { display: block; font-size: 11px; color: #f2e9d8; }
.b3-book li span { display: block; color: #c9b393; }
.b3-book li em { font-style: normal; color: #bdb09c; }
.b3-book li.on { border-color: #e8b84b; }
.b3-book li.on b, .b3-book li.on em { color: #e8b84b; }
.b3-book li.unk b { color: #bdb09c; letter-spacing: 2px; }
.b3-book li.unk span { color: #bdb09c; }

/* rank head */
.r3-head { display: flex; gap: 10px; align-items: stretch; }
.r3-head.flash { border-color: #e8b84b; animation: r3-glow 900ms ease-in-out 3; }
@keyframes r3-glow { 50% { box-shadow: 0 0 0 3px rgba(232,184,75,0.45); } }
.r3-rank { width: 64px; flex-shrink: 0; background: #a8452a; border: 2px solid #2b2320; border-radius: 6px; display: flex;
  flex-direction: column; align-items: center; justify-content: center; color: #f6ecd9; }
.r3-rank span { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.r3-rank b { font: 900 26px/1 ui-monospace, "Consolas", monospace; }
.r3-xpcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.r3-xptrack, .r3-progtrack { height: 10px; background: #2b2320; border: 1px solid #6b4a34; border-radius: 5px; overflow: hidden; }
.r3-xpfill { height: 100%; background: linear-gradient(90deg, #d9a63b, #f2d27a); transition: width 240ms ease-out; }
.r3-xptext { font-size: 10px; color: #c9b393; font-variant-numeric: tabular-nums; }
.r3-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.r3-chips span { font-size: 11px; background: #2b2320; border: 1px solid #6b4a34; border-radius: 4px; padding: 2px 6px; color: #c9b393; }
.r3-chips b { color: #f2e9d8; font-variant-numeric: tabular-nums; }
.r3-chips span.hot { border-color: #e8b84b; color: #e8b84b; }
.r3-chips span.hot b { color: #e8b84b; }

/* bonus + invest rows */
.r3-row { display: flex; align-items: center; gap: 8px; background: #3d3129; border: 2px solid #6b4a34; border-radius: 6px; padding: 6px 8px; }
.r3-row.ready { border-color: #e8b84b; }
.r3-row.active { border-color: #4a7a4f; }
.r3-body { flex: 1; min-width: 0; }
.r3-name { font-size: 13px; font-weight: bold; }
.r3-lv { font-size: 10px; font-weight: normal; color: #bdb09c; }
.r3-desc { font-size: 11px; color: #c9b393; line-height: 1.35; }
.r3-reward { color: #8fd18f; }
.r3-pips { display: flex; gap: 2px; margin-top: 3px; }
.r3-pips i { width: 8px; height: 4px; background: #2b2320; border: 1px solid #6b4a34; }
.r3-pips i.on { background: #e8b84b; border-color: #e8b84b; }
.r3-prog { width: 86px; flex-shrink: 0; text-align: center; }
.r3-prog small { font-size: 10px; color: #8fd18f; }
.r3-progfill { height: 100%; background: #4a7a4f; transition: width 240ms linear; }
.r3-more { min-height: 44px; font: inherit; font-size: 12px; color: #c9b393; background: transparent; border: 2px dashed #6b4a34; border-radius: 6px; }
.r3-empty { font-size: 11px; color: #bdb09c; margin: 2px 0; }

@media (prefers-reduced-motion: reduce) {
  .r3-head.flash { animation: none; }
  .r3-xpfill, .r3-progfill { transition: none; }
}

/* ---------- PV3 rank polish (.pxh header style lives in ui2.css) ---------- */
#rankPanel .pxh { margin: 8px 0 0; }
.r3-ico { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; background: #3f5566; border: 2px solid #1e2a33;
  border-radius: 4px; box-shadow: inset 0 0 0 1px #5d7a8e; }
.r3-row.ready .r3-ico { background: #6b5a2e; border-color: #2b1d16; box-shadow: inset 0 0 0 1px #e8b84b; }
.r3-ico img { width: 24px; height: 24px; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.r3-head.flash .r3-xpfill { animation: r3-fillpulse 900ms ease-in-out 3; }
@keyframes r3-fillpulse { 50% { filter: brightness(1.35); } }
.r3-more { width: 100%; }
@media (prefers-reduced-motion: reduce) { .r3-head.flash .r3-xpfill { animation: none; } }