.analytics-main { overflow: hidden; color: #173d58; background: #f3f7fa; }
.analytics-main [hidden] { display: none !important; }
.analytics-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(118deg, #062d4d 0%, #075c78 58%, #0a8b8d 100%); }
.analytics-hero::before { content: ""; position: absolute; width: 430px; height: 430px; right: 4%; top: -290px; border: 88px solid rgba(255,255,255,.055); border-radius: 50%; }
.analytics-hero__inner { position: relative; z-index: 1; min-height: 330px; padding-block: 62px 91px; display: grid; grid-template-columns: minmax(0, 1fr) 440px; align-items: center; gap: 60px; }
.analytics-eyebrow { margin: 0 0 11px; color: #a9e9ef; font-size: max(var(--s360-readable-floor, 14px), 10px); font-weight: 950; letter-spacing: .19em; }
.analytics-hero h1 { margin: 0; font-size: clamp(37px, 5vw, 58px); line-height: 1.18; letter-spacing: -.055em; }
.analytics-hero h1 strong { color: #dfff91; }
.analytics-hero__inner > div > p:last-child { max-width: 610px; margin: 18px 0 0; color: #d4eaf0; font-size: max(var(--s360-readable-floor, 14px), 13px); }
.analytics-hero dl { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(1,29,50,.25); backdrop-filter: blur(8px); }
.analytics-hero dl div { min-height: 108px; padding: 20px 12px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.analytics-hero dl div + div { border-left: 1px solid rgba(255,255,255,.14); }
.analytics-hero dt { color: #a6d9e8; font-size: max(var(--s360-readable-floor, 14px), 8px); font-weight: 950; letter-spacing: .11em; }
.analytics-hero dd { margin: 5px 0 0; font-size: max(var(--s360-readable-floor, 14px), 9px); }
.analytics-hero dd strong { margin-right: 3px; font-size: 27px; line-height: 1; }
.analytics-shell { padding-bottom: 90px; }
.analytics-controls { position: relative; z-index: 3; margin-top: -43px; padding: 25px 27px; display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: center; gap: 26px; border: 1px solid rgba(9,70,111,.13); border-radius: 16px; background: #fff; box-shadow: 0 16px 38px rgba(15,55,84,.14); }
.analytics-controls__intro > span, .analytics-heading span { color: #1680b6; font-size: max(var(--s360-readable-floor, 14px), 9px); font-weight: 950; letter-spacing: .14em; }
.analytics-controls h2, .analytics-heading h2 { margin: 1px 0 0; color: #083254; font-size: 25px; line-height: 1.3; letter-spacing: -.035em; }
.analytics-controls__intro p { margin: 5px 0 0; color: #667b8e; font-size: max(var(--s360-readable-floor, 14px), 10px); }
.analytics-controls__grid { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 10px; }
.analytics-controls label { color: #657b8d; font-size: max(var(--s360-readable-floor, 14px), 8px); font-weight: 850; }
.analytics-controls select, .analytics-controls input { width: 100%; min-height: 41px; margin-top: 5px; padding: 0 11px; border: 1px solid #c9dae5; border-radius: 8px; color: #173d58; background: #fff; font-size: max(var(--s360-readable-floor, 14px), 10px); font-weight: 750; }
.analytics-controls select:focus, .analytics-controls input:focus { outline: 3px solid rgba(22,128,182,.13); border-color: #1680b6; }
.analytics-search { grid-column: span 2; }
.analytics-overview, .analytics-trend, .tier-section, .deck-ranking, .analytics-winners { padding-top: 61px; }
.analytics-heading { margin-bottom: 22px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.analytics-heading p { margin: 0; color: #667b8e; font-size: max(var(--s360-readable-floor, 14px), 10px); }
.analytics-heading button { padding: 9px 14px; border: 1px solid #bad2df; border-radius: 8px; color: #08779a; background: #fff; cursor: pointer; font-size: max(var(--s360-readable-floor, 14px), 10px); font-weight: 900; }
.analytics-heading button:hover { color: #fff; border-color: #08779a; background: #08779a; }
.analytics-overview__grid { display: grid; grid-template-columns: minmax(360px, .65fr) minmax(0, 1.35fr); gap: 20px; }
.usage-donut-card, .usage-bars, .trend-card, .tier-board, .ranking-table-wrap, .analytics-winner-list { border: 1px solid #dae7ee; border-radius: 16px; background: #fff; box-shadow: 0 10px 29px rgba(16,57,91,.065); }
.usage-donut-card { min-height: 390px; padding: 29px; display: grid; grid-template-columns: 185px minmax(0, 1fr); align-items: center; gap: 27px; }
.usage-donut { width: 185px; height: 185px; padding: 24px; display: grid; place-items: center; border-radius: 50%; background: #dfe9ee; }
.usage-donut > div { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: #fff; box-shadow: 0 2px 13px rgba(7,53,81,.08); }
.usage-donut strong { color: #083254; font-size: 33px; line-height: 1; }
.usage-donut span { margin-top: 5px; color: #718696; font-size: max(var(--s360-readable-floor, 14px), 8px); }
.usage-donut-card ol { margin: 0; padding: 0; list-style: none; }
.usage-donut-card li { padding: 7px 0; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; border-bottom: 1px solid #e5edf2; font-size: max(var(--s360-readable-floor, 14px), 9px); }
.usage-donut-card li:last-child { border-bottom: 0; }
.usage-donut-card li i { width: 7px; height: 7px; border-radius: 50%; background: var(--legend-color); }
.usage-donut-card li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-donut-card li strong { color: #173d58; }
.usage-bars { min-height: 390px; padding: 25px 28px; }
.usage-bar { min-height: 33px; display: grid; grid-template-columns: minmax(170px, .85fr) minmax(150px, 1fr) 50px; align-items: center; gap: 13px; }
.usage-bar > div:first-child { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 7px; }
.usage-bar > div:first-child span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #0b7695; font-size: max(var(--s360-readable-floor, 14px), 8px); font-weight: 950; }
.usage-bar > div:first-child strong { overflow: hidden; color: #153d59; font-size: max(var(--s360-readable-floor, 14px), 10px); text-overflow: ellipsis; white-space: nowrap; }
.usage-bar > div:first-child em { color: #81919e; font-size: max(var(--s360-readable-floor, 14px), 8px); font-style: normal; }
.usage-bar__track { height: 8px; overflow: hidden; border-radius: 99px; background: #e5edf1; }
.usage-bar__track i { height: 100%; display: block; border-radius: inherit; background: var(--bar-color); }
.usage-bar > b { color: #0a6485; font-size: max(var(--s360-readable-floor, 14px), 10px); text-align: right; }
.trend-card { padding: 24px 26px 17px; }
.trend-legend { min-height: 31px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; }
.trend-legend span { display: flex; align-items: center; gap: 6px; color: #536c7e; font-size: max(var(--s360-readable-floor, 14px), 9px); font-weight: 850; }
.trend-legend i { width: 16px; height: 4px; border-radius: 99px; background: var(--trend-color); }
.trend-chart-wrap { overflow-x: auto; }
.trend-chart { min-width: 720px; width: 100%; height: auto; display: block; }
.trend-grid { stroke: #dce7ec; stroke-width: 1; stroke-dasharray: 3 4; }
.trend-axis { fill: #718797; font-size: max(var(--s360-readable-floor, 14px), 10px); font-weight: 700; }
.trend-empty { margin: 45px 0; color: #718797; font-size: max(var(--s360-readable-floor, 14px), 11px); text-align: center; }
.tier-board { overflow: hidden; }
.tier-row { min-height: 112px; display: grid; grid-template-columns: 105px minmax(0, 1fr); border-bottom: 1px solid #dfe9ef; }
.tier-row:last-child { border-bottom: 0; }
.tier-row > b { display: grid; place-items: center; color: #fff; font-size: 39px; }
.tier-row--s > b { background: linear-gradient(135deg, #e76749, #ef9b3d); }
.tier-row--a > b { background: linear-gradient(135deg, #0c789a, #18a6aa); }
.tier-row--b > b { background: linear-gradient(135deg, #71923e, #9ab855); }
.tier-row--c > b { background: linear-gradient(135deg, #68798b, #8fa0ad); }
.tier-row > div { padding: 18px 20px; display: flex; align-content: center; align-items: center; flex-wrap: wrap; gap: 9px; background: #fff; }
.tier-row > div > span { min-width: 155px; padding: 10px 12px; display: flex; flex-direction: column; border: 1px solid #dce7ed; border-radius: 9px; background: #f7fafc; }
.tier-row > div > span strong { color: #123d59; font-size: max(var(--s360-readable-floor, 14px), 10px); }
.tier-row > div > span small { margin-top: 3px; color: #758898; font-size: max(var(--s360-readable-floor, 14px), 8px); }
.tier-row > div > em { color: #8a99a4; font-size: max(var(--s360-readable-floor, 14px), 10px); font-style: normal; }
.ranking-table-wrap { overflow-x: auto; }
.ranking-table-wrap table { width: 100%; border-collapse: collapse; font-size: max(var(--s360-readable-floor, 14px), 10px); }
.ranking-table-wrap table th, .ranking-table-wrap table td { padding: 13px 14px; border-bottom: 1px solid #e0e9ef; text-align: left; vertical-align: middle; }
.ranking-table-wrap thead { color: #fff; background: #083f67; }
.ranking-table-wrap thead th { white-space: nowrap; }
.ranking-table-wrap tbody tr:last-child th, .ranking-table-wrap tbody tr:last-child td { border-bottom: 0; }
.ranking-table-wrap tbody tr:nth-child(even) { background: #f8fbfd; }
.ranking-table-wrap tbody th { min-width: 145px; color: #113c58; font-size: max(var(--s360-readable-floor, 14px), 11px); }
.ranking-table-wrap tbody th small { margin-top: 3px; display: block; color: #82939f; font-size: max(var(--s360-readable-floor, 14px), 8px); }
.ranking-table-wrap tbody td:nth-child(3) { position: relative; min-width: 120px; }
.ranking-table-wrap tbody td:nth-child(3) b { position: relative; z-index: 2; color: #087493; }
.ranking-table-wrap tbody td:nth-child(3) i { position: absolute; z-index: 1; left: 10px; bottom: 5px; height: 3px; max-width: calc(100% - 20px); border-radius: 99px; background: #29a6ad; }
.ranking-table-wrap tbody td:last-child { min-width: 210px; color: #677d8d; line-height: 1.55; }
.ranking-trend { padding: 3px 6px; border-radius: 999px; font-size: max(var(--s360-readable-floor, 14px), 8px); font-weight: 900; }
.ranking-trend.is-up { color: #087b6a; background: #dff4ec; }
.ranking-trend.is-down { color: #b15450; background: #fae7e6; }
.ranking-trend.is-flat { color: #617788; background: #eaf0f3; }
.analytics-winner-list { overflow: hidden; }
.analytics-winner-list a { min-height: 68px; padding: 11px 16px; display: grid; grid-template-columns: 80px minmax(180px, .7fr) minmax(260px, 1.3fr) 18px; align-items: center; gap: 14px; border-bottom: 1px solid #e2ebf0; }
.analytics-winner-list a:last-child { border-bottom: 0; }
.analytics-winner-list a:hover { background: #f2f9fb; }
.analytics-winner-list time { color: #718697; font-size: max(var(--s360-readable-floor, 14px), 9px); }
.analytics-winner-list strong { display: block; overflow: hidden; color: #143e59; font-size: max(var(--s360-readable-floor, 14px), 10px); text-overflow: ellipsis; white-space: nowrap; }
.analytics-winner-list small { display: block; overflow: hidden; color: #748797; font-size: max(var(--s360-readable-floor, 14px), 8px); text-overflow: ellipsis; white-space: nowrap; }
.analytics-winner-list a > b { color: #0a7d9b; font-size: max(var(--s360-readable-floor, 14px), 15px); }
.analytics-empty { margin: 0; padding: 25px; color: #718697; font-size: max(var(--s360-readable-floor, 14px), 10px); text-align: center; }
.analytics-method { margin-top: 35px; padding: 20px 23px; display: grid; grid-template-columns: 135px 1fr; gap: 22px; border-left: 4px solid #0a8197; color: #536b7d; background: #e5f3f5; font-size: max(var(--s360-readable-floor, 14px), 10px); line-height: 1.75; }
.analytics-method strong { color: #083f67; }
.analytics-method p { margin: 0; }

@media (max-width: 980px) {
    .analytics-hero__inner { grid-template-columns: 1fr; gap: 30px; }
    .analytics-hero dl { max-width: 520px; }
    .analytics-controls { grid-template-columns: 1fr; }
    .analytics-controls__grid { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
    .analytics-overview__grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .analytics-hero__inner { min-height: 0; padding-block: 44px 76px; }
    .analytics-hero dl { grid-template-columns: 1fr; }
    .analytics-hero dl div { min-height: 61px; flex-direction: row; align-items: center; justify-content: space-between; }
    .analytics-hero dl div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
    .analytics-controls { padding: 21px; }
    .analytics-controls__grid { grid-template-columns: 1fr 1fr; }
    .analytics-search { grid-column: span 2; }
    .analytics-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
    .usage-donut-card { min-height: 0; padding: 23px; grid-template-columns: 1fr; justify-items: center; }
    .usage-donut-card ol { width: 100%; }
    .usage-bars { padding: 19px 16px; }
    .usage-bar { grid-template-columns: minmax(140px, 1fr) 43px; gap: 8px; }
    .usage-bar__track { grid-column: 1 / -1; height: 5px; }
    .trend-card { padding: 18px 12px 10px; }
    .trend-legend { justify-content: flex-start; }
    .tier-row { min-height: 100px; grid-template-columns: 66px minmax(0, 1fr); }
    .tier-row > b { font-size: 31px; }
    .tier-row > div { padding: 13px; }
    .tier-row > div > span { min-width: 135px; flex: 1; }
    .ranking-table-wrap table { min-width: 850px; }
    .analytics-winner-list a { grid-template-columns: 68px minmax(0, 1fr) 14px; }
    .analytics-winner-list a > div:nth-of-type(2) { display: none; }
    .analytics-method { grid-template-columns: 1fr; gap: 4px; }
}

/* Image-rich tier cards and winning deck cards */
.tier-row { grid-template-columns: 105px minmax(0, 1fr); }
.tier-row > .tier-row__label { padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; }
.tier-row__label > b { font-size: 39px; line-height: 1; }
.tier-row__label > small { color: rgba(255,255,255,.84); font-size: max(var(--s360-readable-floor, 14px), 7px); font-weight: 850; }
.tier-row--s > .tier-row__label { background: linear-gradient(135deg, #e76749, #ef9b3d); }
.tier-row--a > .tier-row__label { background: linear-gradient(135deg, #0c789a, #18a6aa); }
.tier-row--b > .tier-row__label { background: linear-gradient(135deg, #71923e, #9ab855); }
.tier-row--c > .tier-row__label { background: linear-gradient(135deg, #68798b, #8fa0ad); }
.tier-row > .tier-row__decks { padding: 17px 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 10px; background: #fff; }
.tier-deck-card { min-width: 0; min-height: 153px; display: grid; grid-template-columns: 78px minmax(0, 1fr); overflow: hidden; border: 1px solid #dbe6ec; border-radius: 10px; background: #f9fbfc; box-shadow: 0 4px 12px rgba(12,57,84,.055); }
.tier-deck-card__image { min-height: 153px; overflow: hidden; background: linear-gradient(145deg, #d9edf1, #eef6f8); }
.tier-deck-card__image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.tier-deck-card__body { min-width: 0; padding: 12px 10px; display: flex; flex-direction: column; }
.tier-deck-card__body > strong { color: #103b57; font-size: max(var(--s360-readable-floor, 14px), 10px); line-height: 1.45; }
.tier-deck-card__body > small { margin-top: 4px; display: -webkit-box; overflow: hidden; color: #758896; font-size: max(var(--s360-readable-floor, 14px), 7px); line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tier-deck-card__body > div { margin-top: auto; padding-top: 9px; border-top: 1px solid #e1eaef; }
.tier-deck-card__body > div b { display: block; color: #087694; font-size: max(var(--s360-readable-floor, 14px), 15px); }
.tier-deck-card__body > div span { display: block; margin-top: 1px; color: #748795; font-size: max(var(--s360-readable-floor, 14px), 7px); }

.analytics-winner-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.analytics-winner-list .winner-deck-card { min-height: 205px; padding: 0; display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: stretch; gap: 0; overflow: hidden; border: 1px solid #d9e5ec; border-radius: 13px; background: #fff; box-shadow: 0 7px 20px rgba(12,57,84,.065); transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease; }
.analytics-winner-list .winner-deck-card:hover { transform: translateY(-2px); border-color: #81bac7; background: #fff; box-shadow: 0 11px 25px rgba(12,57,84,.11); }
.winner-deck-card__image { overflow: hidden; background: linear-gradient(145deg, #d8edf0, #f0f6f7); }
.winner-deck-card__image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.winner-deck-card__body { min-width: 0; padding: 15px 13px 13px; display: flex; flex-direction: column; }
.winner-deck-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.winner-deck-card__meta time { color: #697f8f; font-size: max(var(--s360-readable-floor, 14px), 8px); }
.winner-deck-card__meta span { padding: 2px 6px; border-radius: 999px; color: #08728f; background: #e3f3f5; font-size: max(var(--s360-readable-floor, 14px), 7px); font-weight: 900; }
.winner-deck-card__body h3 { margin: 10px 0 0; color: #0c3855; font-size: max(var(--s360-readable-floor, 14px), 14px); line-height: 1.4; }
.winner-deck-card__body > p { margin: 4px 0 0; display: -webkit-box; overflow: hidden; color: #718492; font-size: max(var(--s360-readable-floor, 14px), 8px); line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.winner-deck-card__foot { margin-top: auto; padding-top: 11px; display: flex; align-items: end; justify-content: space-between; gap: 8px; border-top: 1px solid #e2eaef; }
.winner-deck-card__foot > span { min-width: 0; }
.winner-deck-card__foot strong, .winner-deck-card__foot small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winner-deck-card__foot strong { color: #19435c; font-size: max(var(--s360-readable-floor, 14px), 8px); }
.winner-deck-card__foot small { margin-top: 2px; color: #83939e; font-size: max(var(--s360-readable-floor, 14px), 7px); }
.winner-deck-card__foot > b { flex: 0 0 auto; color: #0a7d9b; font-size: max(var(--s360-readable-floor, 14px), 15px); }

.analytics-winner-tools { margin-bottom: 18px; padding: 16px; display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)) auto; align-items: end; gap: 10px; border: 1px solid #d6e4eb; border-radius: 13px; background: #fff; }
.analytics-winner-tools label { color: #657b8d; font-size: max(var(--s360-readable-floor, 14px), 8px); font-weight: 850; }
.analytics-winner-tools label span { display: block; margin-bottom: 5px; }
.analytics-winner-tools select { width: 100%; min-height: 41px; padding: 0 11px; border: 1px solid #c9dae5; border-radius: 8px; color: #173d58; background: #fff; font-size: max(var(--s360-readable-floor, 14px), 10px); font-weight: 750; }
.analytics-winner-tools select:focus { outline: 3px solid rgba(22,128,182,.13); border-color: #1680b6; }
.analytics-winner-tools > button, .analytics-winner-pagination button { min-height: 41px; padding: 0 14px; border: 1px solid #bad2df; border-radius: 8px; color: #08779a; background: #fff; cursor: pointer; font-size: max(var(--s360-readable-floor, 14px), 9px); font-weight: 900; }
.analytics-winner-tools > button:hover, .analytics-winner-pagination button:hover:not(:disabled), .analytics-winner-pagination button.is-active { color: #fff; border-color: #08779a; background: #08779a; }
.analytics-winner-pagination { margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 13px; }
.analytics-winner-pagination > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.analytics-winner-pagination > div button { min-width: 38px; padding: 0 10px; }
.analytics-winner-pagination button:disabled { opacity: .42; cursor: not-allowed; }

@media (max-width: 1050px) {
    .tier-row > .tier-row__decks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .analytics-winner-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .analytics-winner-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tier-row > .tier-row__decks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .analytics-winner-tools { grid-template-columns: 1fr; }
    .analytics-winner-pagination { align-items: stretch; flex-wrap: wrap; }
    .analytics-winner-pagination > div { order: -1; width: 100%; }
    .analytics-winner-pagination > button { flex: 1; }
    .tier-row { grid-template-columns: 58px minmax(0, 1fr); }
    .tier-row__label > b { font-size: 29px; }
    .tier-row > .tier-row__decks { padding: 11px; grid-template-columns: 1fr; }
    .tier-deck-card { grid-template-columns: 76px minmax(0, 1fr); min-height: 134px; }
    .tier-deck-card__image { min-height: 134px; }
    .analytics-winner-list { grid-template-columns: 1fr; }
    .analytics-winner-list .winner-deck-card { min-height: 190px; grid-template-columns: 105px minmax(0, 1fr); }
}
/* Preserve the full card artwork in analytics thumbnails */
.tier-deck-card__image img, .winner-deck-card__image img { object-fit: contain; }


/* 2026-09-04: Pokemon-led analytics visual refresh */
.analytics-main {
    color: #173b54;
    background:
        radial-gradient(circle at 12% 7%, rgba(28, 169, 181, .07), transparent 24rem),
        linear-gradient(180deg, #f5f9fb 0%, #eef5f8 100%);
}
.analytics-hero {
    background:
        radial-gradient(circle at 79% 22%, rgba(188, 244, 128, .16), transparent 18rem),
        radial-gradient(circle at 100% 100%, rgba(30, 174, 184, .30), transparent 30rem),
        linear-gradient(125deg, #052b4b 0%, #075675 56%, #087f86 100%);
}
.analytics-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .2;
    background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(90deg, transparent 15%, #000 100%);
}
.analytics-hero__inner {
    min-height: 440px;
    padding-block: 58px 103px;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 56px;
}
.analytics-hero__copy { position: relative; z-index: 2; }
.analytics-eyebrow { margin-bottom: 14px; font-size: max(var(--s360-readable-floor, 14px), 12px); letter-spacing: .2em; }
.analytics-hero h1 { max-width: 680px; font-size: clamp(42px, 5vw, 64px); line-height: 1.13; }
.analytics-hero__copy > p:not(.analytics-eyebrow) { max-width: 620px; margin: 20px 0 0; color: #d8edf2; font-size: max(var(--s360-readable-floor, 14px), 15px); line-height: 1.85; }
.analytics-hero dl {
    max-width: 580px;
    margin-top: 30px;
    border-radius: 18px;
    background: rgba(1, 31, 52, .42);
    box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.analytics-hero dl div { min-height: 92px; padding: 16px 12px; }
.analytics-hero dt { font-size: max(var(--s360-readable-floor, 14px), 9px); }
.analytics-hero dd { font-size: max(var(--s360-readable-floor, 14px), 11px); }
.analytics-hero dd strong { font-size: 30px; }

.analytics-hero__cards { position: relative; z-index: 2; min-height: 330px; }
.analytics-hero-card {
    position: absolute;
    width: 184px;
    margin: 0;
    padding: 8px 8px 11px;
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 18px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 24px 55px rgba(0, 21, 37, .33);
}
.analytics-hero-card img {
    width: 100%;
    aspect-ratio: 63 / 88;
    display: block;
    border-radius: 12px;
    background: #eaf2f4;
    object-fit: contain;
}
.analytics-hero-card figcaption {
    padding: 9px 3px 0;
    overflow: hidden;
    color: #123d58;
    font-size: max(var(--s360-readable-floor, 14px), 11px);
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.analytics-hero-card figcaption span {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #0b7893;
    font-size: max(var(--s360-readable-floor, 14px), 9px);
}
.analytics-hero-card--1 { z-index: 3; left: 130px; top: 8px; transform: rotate(3deg); }
.analytics-hero-card--2 { z-index: 2; left: 8px; top: 45px; transform: rotate(-9deg) scale(.92); }
.analytics-hero-card--3 { z-index: 1; right: 0; top: 53px; transform: rotate(11deg) scale(.9); }

.analytics-shell { padding-bottom: 110px; }
.analytics-controls {
    margin-top: -51px;
    padding: 28px 30px;
    grid-template-columns: 285px minmax(0, 1fr);
    gap: 30px;
    border-radius: 24px;
    border-color: rgba(5, 73, 106, .12);
    box-shadow: 0 20px 48px rgba(11, 55, 82, .13);
}
.analytics-controls__intro { position: relative; padding-left: 64px; }
.analytics-controls__icons { position: absolute; left: 0; top: 2px; width: 54px; height: 54px; }
.analytics-controls__icons span {
    position: absolute;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #e5f0f3;
    box-shadow: 0 4px 11px rgba(8, 58, 84, .14);
}
.analytics-controls__icons span:nth-child(1) { z-index: 3; left: 0; top: 8px; }
.analytics-controls__icons span:nth-child(2) { z-index: 2; left: 17px; top: 0; }
.analytics-controls__icons span:nth-child(3) { z-index: 1; left: 18px; top: 21px; }
.analytics-controls__icons img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; }
.analytics-controls__intro > span, .analytics-heading span { font-size: max(var(--s360-readable-floor, 14px), 10px); letter-spacing: .16em; }
.analytics-controls h2, .analytics-heading h2 { margin-top: 3px; font-size: clamp(25px, 3vw, 32px); }
.analytics-controls__intro p { margin-top: 7px; font-size: max(var(--s360-readable-floor, 14px), 12px); }
.analytics-controls__grid { gap: 13px; }
.analytics-controls label { font-size: max(var(--s360-readable-floor, 14px), 11px); letter-spacing: .02em; }
.analytics-controls select, .analytics-controls input {
    min-height: 46px;
    margin-top: 7px;
    padding-inline: 13px;
    border-radius: 11px;
    font-size: max(var(--s360-readable-floor, 14px), 13px);
}
.analytics-overview, .analytics-trend, .tier-section, .deck-ranking, .analytics-winners { padding-top: 74px; }
.analytics-heading { margin-bottom: 25px; }
.analytics-heading > div { position: relative; padding-left: 17px; }
.analytics-heading > div::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 2px;
    width: 5px;
    border-radius: 99px;
    background: linear-gradient(#12a5ad, #b9dc53);
}
.analytics-heading p { font-size: max(var(--s360-readable-floor, 14px), 12px); }
.analytics-heading button { padding: 11px 17px; border-radius: 10px; font-size: max(var(--s360-readable-floor, 14px), 12px); }

.usage-donut-card, .usage-bars, .trend-card, .tier-board, .ranking-table-wrap {
    border-radius: 22px;
    border-color: #d5e4eb;
    box-shadow: 0 12px 32px rgba(12, 57, 84, .075);
}
.usage-donut-card { min-height: 430px; padding: 32px; grid-template-columns: 190px minmax(0, 1fr); }
.usage-donut { width: 190px; height: 190px; box-shadow: 0 10px 28px rgba(8, 62, 89, .12); }
.usage-donut strong { font-size: 38px; }
.usage-donut span { font-size: max(var(--s360-readable-floor, 14px), 10px); }
.usage-donut-card li {
    min-height: 43px;
    padding: 6px 0;
    grid-template-columns: 7px 31px minmax(0, 1fr) auto;
    gap: 8px;
    font-size: max(var(--s360-readable-floor, 14px), 11px);
}
.usage-legend__pokemon {
    width: 29px;
    height: 34px;
    overflow: hidden;
    border-radius: 6px;
    background: #edf4f6;
}
.usage-legend__pokemon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.usage-legend__pokemon--other { display: grid; place-items: center; color: #78909e; font-size: max(var(--s360-readable-floor, 14px), 11px); font-weight: 900; letter-spacing: 1px; }
.usage-bars { min-height: 430px; padding: 22px 28px; }
.usage-bar { min-height: 40px; grid-template-columns: minmax(235px, .92fr) minmax(150px, 1fr) 55px; }
.usage-bar > div:first-child { grid-template-columns: 24px 30px minmax(0, 1fr) auto; gap: 8px; }
.usage-bar > div:first-child span:first-child { width: 22px; height: 22px; font-size: max(var(--s360-readable-floor, 14px), 9px); }
.usage-bar__pokemon {
    width: 28px !important;
    height: 34px !important;
    overflow: hidden;
    border-radius: 5px !important;
    background: #eaf2f5 !important;
}
.usage-bar__pokemon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.usage-bar > div:first-child strong { font-size: max(var(--s360-readable-floor, 14px), 12px); }
.usage-bar > div:first-child em { font-size: max(var(--s360-readable-floor, 14px), 10px); }
.usage-bar > b { font-size: max(var(--s360-readable-floor, 14px), 12px); }
.usage-bar__track { height: 9px; }

.trend-card { padding: 26px 29px 20px; }
.trend-legend { min-height: 48px; gap: 10px 20px; }
.trend-legend > span { font-size: max(var(--s360-readable-floor, 14px), 11px); }
.trend-legend__pokemon {
    width: 31px;
    height: 39px;
    overflow: hidden;
    border-radius: 6px;
    background: #e9f2f4;
}
.trend-legend__pokemon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.trend-legend i { width: 18px; }

.tier-row { min-height: 154px; grid-template-columns: 112px minmax(0, 1fr); }
.tier-row__label > b { font-size: 43px; }
.tier-row__label > small { font-size: max(var(--s360-readable-floor, 14px), 9px); }
.tier-row > .tier-row__decks { padding: 20px; gap: 13px; }
.tier-deck-card {
    min-height: 178px;
    grid-template-columns: 90px minmax(0, 1fr);
    border-radius: 13px;
    transition: transform .18s ease, box-shadow .18s ease;
}
.tier-deck-card:hover { transform: translateY(-2px); box-shadow: 0 10px 23px rgba(10, 55, 82, .11); }
.tier-deck-card__image { min-height: 178px; }
.tier-deck-card__body { padding: 14px 12px; }
.tier-deck-card__body > strong { font-size: max(var(--s360-readable-floor, 14px), 12px); }
.tier-deck-card__body > small { font-size: max(var(--s360-readable-floor, 14px), 9px); }
.tier-deck-card__body > div b { font-size: 18px; }
.tier-deck-card__body > div span { font-size: max(var(--s360-readable-floor, 14px), 9px); }

.ranking-table-wrap table { font-size: max(var(--s360-readable-floor, 14px), 12px); }
.ranking-table-wrap table th, .ranking-table-wrap table td { padding: 13px 15px; }
.ranking-table-wrap tbody th {
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: max(var(--s360-readable-floor, 14px), 13px);
}
.ranking-pokemon {
    width: 40px;
    height: 52px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 7px;
    background: #eaf2f4;
    box-shadow: 0 3px 9px rgba(11, 57, 82, .1);
}
.ranking-pokemon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.ranking-table-wrap tbody th small { font-size: max(var(--s360-readable-floor, 14px), 9px); }
.ranking-table-wrap tbody td:nth-child(3) b { font-size: max(var(--s360-readable-floor, 14px), 13px); }
.ranking-trend { padding: 5px 8px; font-size: max(var(--s360-readable-floor, 14px), 10px); }

.analytics-winner-list { gap: 16px; }
.analytics-winner-list .winner-deck-card { min-height: 225px; grid-template-columns: 118px minmax(0, 1fr); border-radius: 17px; }
.analytics-winner-list .winner-deck-card > .winner-deck-card__body { min-width: 0; padding: 17px 15px 15px; display: flex; flex-direction: column; color: #173b54; background: #fff; }
.winner-deck-card__body { padding: 17px 15px 15px; }
.winner-deck-card__meta time { font-size: max(var(--s360-readable-floor, 14px), 10px); }
.winner-deck-card__meta span { padding: 3px 7px; font-size: max(var(--s360-readable-floor, 14px), 9px); }
.winner-deck-card__body h3 { font-size: 16px; }
.winner-deck-card__body > p { font-size: max(var(--s360-readable-floor, 14px), 10px); }
.winner-deck-card__foot strong { font-size: max(var(--s360-readable-floor, 14px), 10px); }
.winner-deck-card__foot small { font-size: max(var(--s360-readable-floor, 14px), 9px); }
.analytics-winner-tools { padding: 19px; border-radius: 16px; }
.analytics-winner-tools label { font-size: max(var(--s360-readable-floor, 14px), 11px); }
.analytics-winner-tools select { min-height: 45px; font-size: max(var(--s360-readable-floor, 14px), 12px); }
.analytics-winner-tools > button, .analytics-winner-pagination button { min-height: 45px; font-size: max(var(--s360-readable-floor, 14px), 11px); }
.analytics-method { margin-top: 44px; padding: 24px 27px; border-radius: 0 15px 15px 0; font-size: max(var(--s360-readable-floor, 14px), 12px); }

@media (max-width: 1050px) {
    .analytics-hero__inner { grid-template-columns: minmax(0, 1fr) 350px; gap: 35px; }
    .analytics-hero-card { width: 155px; }
    .analytics-hero-card--1 { left: 100px; }
    .analytics-controls { grid-template-columns: 245px minmax(0, 1fr); }
    .analytics-controls__grid { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
    .analytics-search { grid-column: span 2; }
    .usage-donut-card { grid-template-columns: 165px minmax(0, 1fr); padding: 25px; }
    .usage-donut { width: 165px; height: 165px; }
}
@media (max-width: 820px) {
    .analytics-hero__inner { min-height: 600px; padding-block: 44px 86px; grid-template-columns: 1fr; }
    .analytics-hero__cards { min-height: 260px; max-width: 430px; }
    .analytics-hero-card { width: 142px; }
    .analytics-hero-card--1 { left: 140px; top: 0; }
    .analytics-hero-card--2 { left: 28px; top: 25px; }
    .analytics-hero-card--3 { left: 255px; right: auto; top: 27px; }
    .analytics-controls { grid-template-columns: 1fr; }
    .analytics-overview__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .analytics-hero__inner { min-height: 565px; padding-block: 35px 75px; gap: 25px; }
    .analytics-hero h1 { font-size: 39px; }
    .analytics-hero__copy > p:not(.analytics-eyebrow) { font-size: max(var(--s360-readable-floor, 14px), 13px); line-height: 1.7; }
    .analytics-hero dl { margin-top: 23px; grid-template-columns: repeat(3, 1fr); }
    .analytics-hero dl div { min-height: 72px; padding: 12px 6px; display: flex; flex-direction: column; justify-content: center; }
    .analytics-hero dl div + div { border-top: 0; border-left: 1px solid rgba(255,255,255,.14); }
    .analytics-hero dt { font-size: max(var(--s360-readable-floor, 14px), 7px); }
    .analytics-hero dd strong { font-size: 23px; }
    .analytics-hero__cards { min-height: 225px; }
    .analytics-hero-card { width: 122px; padding: 6px 6px 8px; border-radius: 14px; }
    .analytics-hero-card figcaption { font-size: max(var(--s360-readable-floor, 14px), 9px); }
    .analytics-hero-card--1 { left: calc(50% - 61px); }
    .analytics-hero-card--2 { left: calc(50% - 155px); top: 20px; }
    .analytics-hero-card--3 { left: calc(50% + 35px); top: 22px; }
    .analytics-controls { margin-top: -37px; padding: 22px 18px; border-radius: 18px; }
    .analytics-controls__intro { padding-left: 58px; }
    .analytics-controls__grid { grid-template-columns: 1fr; }
    .analytics-search { grid-column: auto; }
    .analytics-overview, .analytics-trend, .tier-section, .deck-ranking, .analytics-winners { padding-top: 58px; }
    .analytics-heading h2 { font-size: 26px; }
    .usage-donut-card { grid-template-columns: 1fr; padding: 24px 20px; }
    .usage-donut-card li { grid-template-columns: 7px 31px minmax(0, 1fr) auto; }
    .usage-bar { grid-template-columns: minmax(0, 1fr) 47px; min-height: 48px; }
    .usage-bar > div:first-child { grid-template-columns: 22px 28px minmax(0, 1fr) auto; }
    .usage-bar > div:first-child em { display: none; }
    .trend-card { padding: 20px 12px 12px; }
    .trend-legend { justify-content: flex-start; }
    .tier-row { grid-template-columns: 58px minmax(0, 1fr); }
    .tier-deck-card { min-height: 142px; grid-template-columns: 80px minmax(0, 1fr); }
    .tier-deck-card__image { min-height: 142px; }
    .analytics-winner-list .winner-deck-card { min-height: 198px; grid-template-columns: 108px minmax(0, 1fr); }
}