/* 专业材料：品质色の枠付きチップと、ゲーム風の暗い属性提示 */
.material-list { display: grid; gap: 6px; margin: 8px 0; padding: 0; list-style: none; }
.material-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.material-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.material-note { color: var(--muted); font-size: 12px; }
.material-products { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
main .material-chip {
  --q: var(--line);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 3px 10px 3px 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  box-shadow: none;
  cursor: help;
}
main .material-chip:hover,
main .material-chip:focus-visible { border-color: var(--q); }
.material-chip img { width: 26px; height: 26px; border: 1px solid var(--q); border-radius: 5px; }
.material-chip .material-count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.material-chip.q0 { --q: #9d9d9d; }
.material-chip.q1 { --q: #b9b4a6; }
.material-chip.q2 { --q: #1eaa00; }
.material-chip.q3 { --q: #0070dd; }
.material-chip.q4 { --q: #a335ee; }
.material-chip.q5 { --q: #ff8000; }
.material-chip.q2 .material-name { color: #188a00; }
.material-chip.q3 .material-name { color: #0065c8; }
.material-chip.q4 .material-name { color: #8f2fd6; }
:root[data-theme="dark"] .material-chip.q2 .material-name { color: #4ade2a; }
:root[data-theme="dark"] .material-chip.q3 .material-name { color: #3d9bff; }
:root[data-theme="dark"] .material-chip.q4 .material-name { color: #c07bff; }

.material-tip {
  position: fixed;
  z-index: 120;
  width: min(300px, calc(100vw - 16px));
  padding: 12px 14px;
  border: 1px solid #5b6476;
  border-radius: 8px;
  background: #0d1118f2;
  color: #f2efe6;
  font-size: 13px;
  line-height: 1.6;
  box-shadow: 0 10px 30px #0008;
  pointer-events: auto;
}
.material-tip-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.material-tip-head img { width: 40px; height: 40px; border: 1px solid #5b6476; border-radius: 6px; }
.material-tip-head div { display: grid; gap: 2px; }
.material-tip-head strong { font-size: 15px; }
.material-tip-head small { color: #a8b0bd; font-size: 12px; }
.material-tip strong.q0 { color: #9d9d9d; }
.material-tip strong.q1 { color: #ffffff; }
.material-tip strong.q2 { color: #1eff00; }
.material-tip strong.q3 { color: #4a9dff; }
.material-tip strong.q4 { color: #c070ff; }
.material-tip strong.q5 { color: #ff8000; }
.material-tip p { margin: 2px 0; }
.material-line-muted { color: #a8b0bd; }
.material-line-green, .material-line-use { color: #1eff00; }
.material-line-desc, .material-line-flavor { color: #ffd100; }
.material-status { display: inline-block; margin-top: 6px !important; padding: 1px 8px; border-radius: 999px; background: #1eff0022; color: #8ff57a; font-size: 11px; }
.material-source { color: #7d8594; font-size: 11px; }
.material-line-set { margin-top: 6px !important; color: #ffd100; }
.material-line-bonus { color: #9d9d9d; font-size: 12px; }