.deck-statistics { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.statistics-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.25rem; }
.statistics-heading h2 { margin: .1rem 0 0; font: 700 clamp(1.7rem,4vw,2.4rem)/1.1 Georgia,serif; }
.statistics-heading > p { max-width: 420px; margin: 0; color: var(--muted); font-size: .9rem; text-align: right; }
.statistics-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.stat-panel { min-width: 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: .65rem; background: #fff; }
.stat-panel h3 { margin: 0 0 1rem; font-size: 1rem; }
.stat-empty, .stat-note { margin: .5rem 0 0; color: var(--muted); font-size: .86rem; }
.mana-bars { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); height: 190px; align-items: end; gap: .45rem; padding-top: 1.5rem; border-bottom: 1px solid var(--line); }
.mana-bar { display: grid; height: 100%; grid-template-rows: 1.5rem 1fr 1.7rem; align-items: end; text-align: center; }
.mana-bar strong { font-size: .8rem; }
.mana-bar i { display: block; width: min(100%,34px); height: max(3px,var(--bar-height)); max-height: 100%; margin: 0 auto; border-radius: .25rem .25rem 0 0; background: var(--green); }
.mana-bar span { align-self: center; color: var(--muted); font-size: .8rem; }
.stat-summary { display: flex; gap: 1.5rem; margin: 1rem 0 0; }
.stat-summary div { display: flex; gap: .4rem; }.stat-summary dt { color: var(--muted); }.stat-summary dd { margin: 0; font-weight: 800; }
.color-breakdown { display: grid; gap: .65rem; }.color-breakdown > div { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: .55rem; }
.mana-dot { width: 14px; height: 14px; border: 1px solid rgba(24,37,31,.22); border-radius: 50%; }
.mana-w { background: #f2ead1; }.mana-u { background: #69a9d3; }.mana-b { background: #504a52; }.mana-r { background: #d86855; }.mana-g { background: #5e9f6f; }.mana-c { background: #b9bfbc; }
.donut-stat { display: grid; grid-template-columns: minmax(150px,.8fr) minmax(140px,1fr); align-items: center; gap: 1.5rem; }
.mana-donut { position: relative; width: min(100%,210px); aspect-ratio: 1; margin: auto; border-radius: 50%; background: var(--donut-segments); box-shadow: inset 0 0 0 1px rgba(24,37,31,.08); }
.mana-donut::after { content: ""; position: absolute; inset: 25%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(24,37,31,.08); }
.mana-donut > span { position: absolute; z-index: 1; inset: 30%; display: flex; align-items: center; justify-content: center; flex-direction: column; line-height: 1.05; text-align: center; }
.mana-donut strong { font: 700 1.5rem/1 Georgia,serif; }.mana-donut small { margin-top: .25rem; color: var(--muted); font-size: .7rem; }
.mana-legend small { color: var(--muted); }
.ranked-stats { display: grid; gap: .65rem; }.ranked-stats > div { display: grid; grid-template-columns: minmax(85px,auto) 1fr 2rem; align-items: center; gap: .65rem; }
.ranked-stats i { height: 7px; overflow: hidden; border-radius: 99px; background: #e7ebe8; }.ranked-stats b { display: block; height: 100%; border-radius: inherit; background: var(--green); }.ranked-stats strong { text-align: right; }
.tag-stats { display: flex; flex-wrap: wrap; gap: .45rem; }.tag-stats > span { padding: .32rem .55rem; border: 1px solid var(--line); border-radius: 99px; background: #f7f8f5; font-size: .83rem; }.tag-stats strong { margin-left: .25rem; color: var(--green); }
.stat-price { grid-column: 1/-1; display: grid; grid-template-columns: minmax(180px,.7fr) minmax(0,1.3fr); grid-template-areas: "summary chart" "note chart"; align-items: center; column-gap: 2rem; }
.stat-price > div:first-child { grid-area: summary; align-self: end; }.stat-price > .stat-note { grid-area: note; align-self: start; }
.stat-price:not(:has(.deck-price-chart)) { grid-template-columns: 1fr; grid-template-areas: "summary" "note"; }
.price-total { display: block; color: var(--green); font: 700 1.65rem/1.1 Georgia,serif; }.stat-price p { margin: .4rem 0 0; font-size: .84rem; }
.deck-price-chart { grid-area: chart; margin: 0; padding-left: 1.5rem; border-left: 1px solid var(--line); }.deck-price-chart svg { display: block; width: 100%; height: 125px; }.deck-price-chart line { stroke: var(--line); }.deck-price-chart polyline { fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }.deck-price-chart circle { fill: #fff; stroke: var(--green); stroke-width: 2.5; }
@media (max-width: 700px) { .statistics-heading { align-items: start; flex-direction: column; gap: .5rem; }.statistics-heading > p { text-align: left; }.statistics-grid { grid-template-columns: 1fr; }.stat-price { grid-column: auto; grid-template-columns: 1fr; grid-template-areas: "summary" "note" "chart"; gap: 0; }.deck-price-chart { margin-top: .9rem; padding: .75rem 0 0; border-top: 1px solid var(--line); border-left: 0; } }
@media (max-width: 390px) { .donut-stat { grid-template-columns: 1fr; }.mana-donut { width: 180px; } }