/* Beyblade X Wiki - Meta-Tierliste (meta.js) */
:root {
  --tier-s: #e5484d; --tier-s-ink: #ffffff;
  --tier-a: #d95700; --tier-a-ink: #ffffff;
  --tier-b: #f5b900; --tier-b-ink: #1f1600;
  --tier-c: #2f9e62; --tier-c-ink: #ffffff;
}
:root[data-theme="dark"] {
  --tier-s: #ff6369; --tier-s-ink: #1a0405;
  --tier-a: #ff9244; --tier-a-ink: #1f0c00;
  --tier-b: #ffcb2e; --tier-b-ink: #1f1600;
  --tier-c: #43d08a; --tier-c-ink: #04160c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tier-s: #ff6369; --tier-s-ink: #1a0405;
    --tier-a: #ff9244; --tier-a-ink: #1f0c00;
    --tier-b: #ffcb2e; --tier-b-ink: #1f1600;
    --tier-c: #43d08a; --tier-c-ink: #04160c;
  }
}

.meta-stand { display: flex; align-items: flex-start; gap: 7px; margin: -4px 2px 14px; font-size: 13px; color: var(--muted); }
.meta-stand svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.meta-stand.old { color: var(--ux); }
.meta-glance { margin: 16px 0 6px; }
.meta-glance .rec b { font-size: 19px; overflow-wrap: anywhere; }
.meta-login { margin: 10px 2px 0; }

.tierlist { display: grid; gap: 18px; margin: 18px 0 22px; }
.tier {
  --t: var(--tier-c); --t-ink: var(--tier-c-ink);
  border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
  background: color-mix(in srgb, var(--t) 5%, var(--surface)); box-shadow: var(--shadow);
}
.tier-s { --t: var(--tier-s); --t-ink: var(--tier-s-ink); }
.tier-a { --t: var(--tier-a); --t-ink: var(--tier-a-ink); }
.tier-b { --t: var(--tier-b); --t-ink: var(--tier-b-ink); }
.tier-c { --t: var(--tier-c); --t-ink: var(--tier-c-ink); }
.tier-h {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--t) 30%, var(--border));
  background: color-mix(in srgb, var(--t) 12%, var(--surface));
}
.tier-l {
  flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  font: 700 30px/1 var(--font-display); background: var(--t); color: var(--t-ink);
}
.tier-t { min-width: 0; flex: 1; }
.tier-t h3 { margin: 0; font: 700 19px/1.2 var(--font-display); }
.tier-t p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
.tier-n { flex: none; font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; padding: 14px; }

.mcard {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border);
}
.mcard:hover { border-color: var(--border-strong); }
.mc-pic { aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; }
.mc-pic img { width: 88%; height: 88%; }
.mc-body { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.mc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mc-rank { font: 700 12.5px/1 var(--font-display); color: var(--muted); letter-spacing: .03em; margin-right: 2px; }
.mc-name { margin: 0; font: 700 17px/1.2 var(--font-display); overflow-wrap: anywhere; }
.mc-name a { text-decoration: none; }
.mc-name a:hover { text-decoration: underline; }
.mtr { font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 6px; line-height: 1.2; white-space: nowrap; }
.mtr.up { color: var(--def); background: color-mix(in srgb, var(--def) 13%, transparent); }
.mtr.new { color: var(--accent); background: var(--accent-soft); }
.mtr.down { color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); }

.mc-parts { display: flex; flex-wrap: wrap; gap: 5px; }
.mc-part {
  display: inline-flex; align-items: baseline; gap: 5px; text-decoration: none; max-width: 100%;
  padding: 3px 8px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--kc) 45%, transparent);
  background: color-mix(in srgb, var(--kc) 8%, var(--surface));
}
.mc-part:hover { background: color-mix(in srgb, var(--kc) 16%, var(--surface)); }
.mc-part b { font: 700 13.5px/1.2 var(--font-display); color: var(--kc); white-space: nowrap; }
.mc-part small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mc-stats { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; }
.mc-stat { display: flex; flex-direction: column; min-width: 0; }
.mc-stat b { font: 700 18px/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
.mc-stat small { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.mc-bar { display: block; height: 6px; margin-top: 5px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.mc-bar i { display: block; height: 100%; border-radius: 999px; background: var(--t, var(--accent)); }

.mc-setups { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.mc-setups small { font-size: 11.5px; color: var(--muted); margin-right: 2px; }
.mc-setup { font: 600 12.5px/1.2 var(--font-display); padding: 3px 7px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); }

.mc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 2px; }
.mc-miss { font-size: 12px; font-weight: 600; color: var(--muted); }
.mc-jp { font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 6px; line-height: 1.2; color: var(--ux); background: color-mix(in srgb, var(--ux) 12%, transparent); }
.mc-btn { margin-left: auto; }

.meta-how ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.meta-how li { font-size: 14px; }
.meta-how a { color: var(--accent); }

@media (max-width: 720px) {
  .tier-h { padding: 10px 12px; gap: 12px; }
  .tier-l { width: 44px; height: 44px; font-size: 25px; border-radius: 12px; }
  .tier-n { display: none; }
  .tier-grid { grid-template-columns: minmax(0, 1fr); padding: 10px; gap: 10px; }
  .mcard { grid-template-columns: 72px minmax(0, 1fr); padding: 10px; gap: 10px; }
  .mc-btn { margin-left: 0; }
  .meta-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meta-glance .rec:nth-child(3) { display: none; }
}