/* Orbit. Observatory, not a casino.
   Rarity is intensity, never hue. No gradients, no sparkles, no glow. */

:root {
  --bg:    #0a0a0b;
  --card:  #101012;
  --edge:  #26262a;
  --ink:   #e7e2d9;
  --dim:   #726c62;
  --faint: #2e2c29;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
}

/* The tier ladder is pure luminance. Rarer is brighter, because a Mythic
   has to be worth holding, but the orbit itself is almost unmarked. The
   tension between the two is the card. */
.t-mythic    { --tier: #f4efe5; }
.t-legendary { --tier: #cfc6b7; }
.t-epic      { --tier: #a79d8e; }
.t-rare      { --tier: #837a6d; }
.t-uncommon  { --tier: #605a51; }
.t-common    { --tier: #46413a; }
.t-control   { --tier: #46413a; }

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 32px 16px 64px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.sheet {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}

.page-head {
  max-width: 1180px;
  margin: 0 auto 30px;
}
.page-head h1 {
  font-size: 19px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; margin: 0 0 8px;
}
.page-head p { margin: 0; color: var(--dim); font-size: 13px; line-height: 1.6; max-width: 62ch; }
.page-head b { color: var(--ink); font-weight: 600; }

/* ---- the card ---- */

.card {
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 3px;
  padding: 0 14px 12px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.rule {
  height: 2px;
  background: var(--tier);
  margin: 0 -14px 11px;
  opacity: .92;
}

.card header {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 9px; letter-spacing: .17em;
  text-transform: uppercase;
}
.card .tier { color: var(--tier); }
.t-common .tier, .t-uncommon .tier, .t-control .tier { color: var(--dim); }
.card .idx { color: var(--faint); }

.plot { margin: 4px -4px 2px; }
.orb { width: 100%; height: auto; display: block; overflow: visible; }

.orb .ring  { fill: none; stroke: #1e1d1f; stroke-width: .7; }
.orb .ghost { fill: none; stroke: var(--tier); stroke-width: .55; opacity: .17; }
.orb .shadow { fill: none; stroke: #4a4650; stroke-width: .55; stroke-dasharray: 1.6 2.6; opacity: .6; }
.orb .sun   { fill: #efe6cf; }
.orb .qline { stroke: #2b2a2c; stroke-width: .7; }
.orb .orbit { fill: none; stroke: var(--tier); stroke-width: 1.5; stroke-linecap: round; }
.orb .orbit.solid { stroke-width: 1.1; }
.orb .body  { fill: var(--tier); }
.orb .body.open { fill: none; stroke: var(--tier); stroke-width: 1; stroke-dasharray: 2 2; }

.card h2 {
  font-size: 12.5px; font-weight: 500; line-height: 1.35;
  margin: 8px 0 0; min-height: 2.7em;
  letter-spacing: -.005em;
}

.count {
  margin: 2px 0 0; padding-top: 9px;
  border-top: 1px solid var(--edge);
  display: flex; align-items: baseline; gap: 7px;
}
.count b {
  font-family: var(--mono); font-size: 25px; font-weight: 500;
  letter-spacing: -.02em; line-height: 1; color: var(--ink);
}
.count span { font-size: 9.5px; line-height: 1.25; color: var(--dim); }

.els {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0 6px; margin: 11px 0 0;
  font-family: var(--mono);
}
.els dt { font-size: 8px; color: var(--faint); letter-spacing: .1em; text-transform: uppercase; }
.els dd { margin: 2px 0 0; font-size: 10px; color: var(--dim); }

.card footer {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--faint);
  font-size: 7.5px; letter-spacing: .04em; color: var(--faint);
}