/* M4 Eternal — gacha.html: the published summon rates. Same steel panels and gold hairlines as the rankings; the grade colours are
   the game's own (common plain, then green, blue, purple, gold, red), drawn as a single stacked bar per summon. */

.page-gacha { --g1: var(--text-soft); --g2: #7fd17f; --g3: #6fa8ff; --g4: #c58cff; --g5: #ffc04d; --g6: #ff6b6b; }

.g1 { --g: var(--g1); } .g2 { --g: var(--g2); } .g3 { --g: var(--g3); }
.g4 { --g: var(--g4); } .g5 { --g: var(--g5); } .g6 { --g: var(--g6); }
.gacha-item, .gacha-items td.g1, .gacha-items td.g2, .gacha-items td.g3, .gacha-items td.g4, .gacha-items td.g5, .gacha-items td.g6,
.gacha-legend th span.g1, .gacha-legend th span.g2, .gacha-legend th span.g3, .gacha-legend th span.g4, .gacha-legend th span.g5,
.gacha-legend th span.g6 { color: var(--g); }

.gacha-classes { margin-bottom: var(--sp-4); }

.gacha-toc { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-6); padding: var(--sp-3) 0; border-block: 1px solid var(--gold-hair); }
.gacha-toc[hidden] { display: none; }
.gacha-toc a { text-decoration: none; }
.gacha-toc a:hover, .gacha-toc a:focus-visible { border-color: var(--gold-line); color: var(--gold-hi); }

.gacha-summons { display: grid; gap: var(--sp-6); }
.gacha-ghost { min-height: 340px; }

.gacha-summon { position: relative; padding: var(--sp-6); border: 1px solid var(--gold-hair); background: var(--panel-grad); box-shadow: var(--sh-2); scroll-margin-top: 96px; }
.gacha-summon::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: linear-gradient(180deg, var(--gold), transparent 80%); }
.gacha-summon__head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.gacha-summon__n { color: var(--gold-lo); font-size: var(--fs-xl); font-weight: 700; letter-spacing: 0.04em; }
.gacha-summon__name { margin: 0; font-size: var(--fs-lg); color: var(--gold-hi); line-height: var(--lh-snug); }

/* The grade bar: each segment as wide as its share, its colour the grade's. */
.gacha-grades { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.gacha-bar { display: flex; height: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--ink); }
.gacha-bar__seg { flex: var(--w, 0) 0 0; min-width: 2px; background: var(--g); box-shadow: inset -1px 0 0 rgba(5, 7, 11, 0.7); }
.gacha-bar__seg.g1 { background: var(--slate); }
.gacha-legend { border-collapse: collapse; display: flex; }
.gacha-legend tbody { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.gacha-legend tr { display: flex; align-items: center; gap: var(--sp-2); }
.gacha-legend th, .gacha-legend td { padding: 0; font-size: var(--fs-sm); }
.gacha-legend th { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.gacha-legend td { color: var(--muted); }
.gacha-dot { width: 10px; height: 10px; transform: rotate(45deg); background: var(--g); flex: none; }
.gacha-dot.g1 { background: var(--slate); outline: 1px solid var(--line-strong); }

.gacha-items th[scope="row"] { font-weight: 500; text-transform: none; letter-spacing: normal; font-size: var(--fs-sm); }
.gacha-items .r, .gacha-items th.r { text-align: right; white-space: nowrap; }
.gacha-count { color: var(--muted); font-size: var(--fs-xs); }
.gacha-table { display: grid; gap: var(--sp-3); }
.gacha-table > .btn { justify-self: start; }
.gacha-more { margin-top: var(--sp-1); }

.gacha-promise { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px dashed var(--gold-hair); }
.gacha-promise__title { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--gold); }

.gacha-note { margin-top: var(--sp-8); }

@media (max-width: 760px) {
  .gacha-summon { padding: var(--sp-4); }
  .gacha-summon__n { font-size: var(--fs-lg); }
  .gacha-legend tbody { gap: var(--sp-2) var(--sp-4); }
}