@charset "UTF-8";
.chart-expandable { position: relative; }
.chart-expandable svg { cursor: zoom-in; }
.chart-expand-button { position: absolute; right: 4px; top: 4px; padding: 3px 8px; border-color: #bdcdbf; background: #ffffffed; color: #365d49; font-size: 11px; line-height: 1.4; opacity: .75; }
.chart-expandable:is(:hover, :focus-within) > .chart-expand-button { opacity: 1; }
.chart-zoom { box-sizing: border-box; width: min(1440px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 1px solid #c0cec4; border-radius: 14px; color: var(--ink); background: #fff; box-shadow: 0 24px 90px #15281d55; }
.chart-zoom[open] { display: flex; flex-direction: column; }
.chart-zoom::backdrop { background: #17251dcc; }
.chart-zoom-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid #e1e7e2; }
.chart-zoom-header h2 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.chart-zoom-close { flex: 0 0 auto; padding: 7px 15px; }
.chart-zoom-content { min-height: 0; overflow: auto; padding: 20px; }
.chart-zoom-stage { display: block; width: 100%; margin: 0; overflow: visible; }
.chart-zoom-stage > :is(figure, .card-balance-scroll) { width: 100%; min-width: 0; max-width: none; margin: 0; overflow: visible; }
#chart-zoom :is(.ascension-chart, .count-chart, .card-balance-scroll) { width: 100%; min-width: 0; max-width: none; }
.chart-zoom-stage svg { display: block; width: 100%; min-width: 0; height: auto; max-height: none; cursor: auto; }
.chart-zoom-stage .chart-expand-button { display: none; }
#chart-zoom .chart-readout { height: auto; min-height: 22px; font-size: 13px; line-height: 1.6; white-space: normal; }
.chart-zoom-stage .activity-pie { grid-template-columns: minmax(0, 2fr) minmax(160px, 1fr); max-width: 980px; margin: auto; }
.chart-zoom-stage .activity-pie-legend { gap: 12px; font-size: 14px; }
.chart-zoom-stage[data-source="daily-activity"] .chart-point.is-today .chart-dot { fill: #ed8424; stroke: #ed8424; }
.chart-zoom-stage[data-source="daily-play-time"] .chart-point.is-today .chart-bar { fill: #ed8424; }
@media (max-width: 600px) {
  .chart-zoom { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .chart-zoom-header { padding: 10px 12px; }
  .chart-zoom-content { padding: 12px; }
  .chart-zoom-stage .activity-pie { grid-template-columns: minmax(0, 1fr); }
  .chart-zoom-stage .activity-pie-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}