/* ---------- タイトル ---------- */
.title-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--sub); }
.icon-btn { background: none; border: 2px solid var(--line); padding: 2px 10px; color: var(--sub); font-size: 13px; }
.logo-block { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.kicker { font-family: var(--f-doc); font-weight: 700; font-size: 13px; letter-spacing: 0.2em; color: var(--sub); margin: 0; }
.logo {
  font-family: var(--f-disp);
  font-weight: 400;
  font-size: clamp(50px, 16vw, 68px);
  line-height: 1.05;
  margin: 0;
  color: #fff;
  letter-spacing: 0.02em;
  text-shadow: 3px 3px 0 var(--shu), 6px 6px 0 #07081a;
}
.catch { font-family: var(--f-doc); font-weight: 800; font-size: 21px; margin: 6px 0 0; color: var(--fluor); }
.lead { margin: 0; font-size: 15px; color: var(--sub); line-height: 1.75; }
.rate-card {
  background: var(--paper);
  color: var(--ink);
  padding: 12px 14px;
  border: 3px solid #07081a;
  box-shadow: 0 5px 0 #07081a;
  font-family: var(--f-doc);
  display: grid; gap: 8px;
}
.rate-card h2 { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: 0.08em; display: flex; justify-content: space-between; align-items: baseline; }
.rate-sub { margin: -4px 0 0; font-size: 13px; color: var(--ink-2); }
.rates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rates div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 6px; border: 2px solid var(--rule); background: #fff; }
.rates canvas { width: 30px; height: 45px; margin-bottom: 2px; }
.rate-legend { margin: 0; font-size: 12px; color: var(--ink-2); }
.rates b { font-family: var(--f-disp); font-weight: 400; font-size: 17px; line-height: 1; }
.rates span { font-family: var(--f-pix); font-size: 14px; font-variant-numeric: tabular-nums; }
.note { margin: -6px 0 0; text-align: center; font-size: 13px; color: var(--sub); }
.collect-btn { width: 100%; }

/* レア度の文字色 */
.t-N { color: var(--n); }
.t-R { color: var(--r); }
.t-SR { color: var(--sr); }
.t-SSR { background: var(--ssr); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dark .t-N { color: var(--n-l); }
.dark .t-R { color: var(--r-l); }
.dark .t-SR { color: var(--sr-l); }