.reference-page{padding-bottom:25px}.reference-page .article-heading{padding-bottom:30px}.reference-number{display:block;color:var(--blue);font:italic 22px Georgia,serif;margin-bottom:6px}.reference-page .article-section{padding-bottom:24px;border-bottom:1px solid var(--line)}.matchup-search-panel{padding:28px 0;border-bottom:1px solid var(--line)}.matchup-search-panel>label{font-size:18px;font-weight:800;display:block;margin-bottom:12px}.pet-combobox{position:relative;max-width:650px}.pet-combobox>input{width:100%;border:2px solid #a4c1f1;padding:14px 16px;font-size:16px;color:#1e3558;background:#fff;border-radius:4px}.pet-combobox>input:focus{border-color:var(--blue);outline:0;box-shadow:0 0 0 3px #dceaff}#pet-options{position:absolute;z-index:12;top:calc(100% + 5px);left:0;right:0;background:#fff;max-height:300px;overflow-y:auto;border:1px solid #cbdaf1;box-shadow:0 8px 24px #18325118}#pet-options button{display:block;width:100%;border:0;border-bottom:1px solid #eef2f8;background:#fff;text-align:left;padding:12px 15px;font-size:14px;color:#203a60}#pet-options button:hover,#pet-options button[aria-selected=true]{background:#edf4ff}#pet-options small{display:block;font-size:11px;color:#7b90af;margin-top:3px}#pet-options p{font-size:13px;padding:16px}.matchup-help{font-size:12px;color:#7285a1;line-height:1.9;margin:12px 0}#matchup-status{font-size:12px;color:#4f709e;margin-top:12px}.selected-pet{display:flex;align-items:center;gap:18px;padding:25px 0 10px}.selected-pet h2{font-size:30px}.selected-pet p{font-size:12px;margin-top:8px}.selected-element{padding:8px 14px;min-width:65px;text-align:center;background:#edf4ff;border:1px solid #d6e5fb;color:var(--blue);font-weight:750;font-size:14px}.matchup-modes{margin:15px 0}.matchup-results{display:grid;gap:26px;margin:24px 0 32px}.matchup-group{border-top:2px solid #9bb7df;padding-top:17px}.matchup-group.good{border-color:#287a67}.matchup-group.bad{border-color:#ba665c}.matchup-group h3{font-size:21px;margin-bottom:15px}.matchup-pets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.matchup-pet{border:1px solid #dce5f1;padding:16px;background:#fff;min-width:0}.matchup-pet h4{margin:0;font-size:17px}.matchup-pet p{font-size:11px;margin-top:5px}.damage-pair{font-size:13px;font-weight:700;margin-top:14px;color:#334f78}.matchup-pet small{display:block;font-size:10px;color:#7b8ea8;line-height:1.8;margin-top:8px}.evolution-names{border-top:1px solid #edf1f8;padding-top:7px}.no-matchup{font-size:13px}.matchup-rules{padding:25px;background:#f4f8ff;border-top:2px solid var(--blue);margin:35px 0}.matchup-rules h2{font-size:24px}.rule-factors{display:flex;gap:22px;flex-wrap:wrap;margin:17px 0}.rule-factors span{font-size:12px;color:#647b9d}.rule-factors strong{font-size:18px;margin-left:5px;color:#245fda}.matchup-rules p{font-size:13px;line-height:1.9;margin-top:10px}.chart-section{margin-top:35px}
@media(max-width:700px){.reference-page .article-heading h1{font-size:29px}.reference-page .hero-actions{flex-wrap:wrap}.matchup-pets{grid-template-columns:1fr}.matchup-search-panel{padding:23px 0}.matchup-search-panel>label{font-size:17px}.pet-combobox>input{font-size:16px}.selected-pet{gap:12px}.selected-pet h2{font-size:27px}.selected-pet p{font-size:11px}.matchup-rules{padding:19px}.matchup-rules h2{font-size:22px}.matchup-rules p{font-size:12px}.rule-factors{gap:13px}.rule-factors strong{font-size:17px}.matchup-group h3{font-size:20px}}

.chart-page .article-heading{padding-bottom:26px}.chart-page .matchup-load{font-size:12px;color:#66758a;margin:18px 0}.chart-section{margin:32px 0 42px}.chart-heading{display:flex;gap:12px;align-items:baseline}.chart-heading .reference-number{margin:0}.chart-heading h2{font-size:26px;letter-spacing:-.04em}.chart-legend{display:flex;flex-wrap:wrap;gap:9px 20px;font-size:12px;margin:15px 0}.chart-legend span{display:inline-flex;gap:5px;align-items:center}.chart-legend .strong{color:#10694b}.chart-legend .weak{color:#9b3545}.chart-legend .neutral{color:#718096}.chart-legend b{font-size:12px}.matchup-chart{width:100%;max-height:none;overflow:visible;margin-top:12px}.matchup-chart table{width:100%;table-layout:fixed;border-collapse:collapse;font-variant-numeric:tabular-nums}.matchup-chart th,.matchup-chart td{border:1px solid #e2e8f0;text-align:center;padding:10px 1px;font-size:11px;line-height:1.4}.matchup-chart th{background:#f1f5fc;color:#283f62;font-weight:750;word-break:keep-all;overflow-wrap:anywhere}.matchup-chart th:first-child{width:78px}.matchup-chart thead th{background:#eaf1fc;vertical-align:middle;height:54px}.matchup-chart td.strong{background:#e5f4ec;color:#126547;font-weight:750}.matchup-chart td.weak{background:#fcecee;color:#9f3b49;font-weight:750}.matchup-chart td.neutral{background:#fff;color:#a0aaba}.matchup-chart .cell-symbol{display:none}.matchup-chart caption{caption-side:bottom;text-align:left;color:#7a879a;font-size:10px;padding:10px 0}.reference-next{margin:35px 0;padding:25px;border:1px solid #d7e3f8;border-radius:12px;background:#f8faff}.reference-next h2{font-size:21px}.reference-next p{font-size:14px;line-height:1.8;margin:10px 0 18px}
@media(max-width:850px){.matchup-chart th,.matchup-chart td{font-size:10px;padding:9px 0}.matchup-chart th:first-child{width:65px}.matchup-chart thead th:not(:first-child)>span{writing-mode:vertical-rl;text-orientation:upright;white-space:nowrap;letter-spacing:2px;display:inline-block}.matchup-chart thead th{height:95px;padding:8px 0}.matchup-chart .cell-value{display:none}.matchup-chart .cell-symbol{display:inline}.matchup-chart td.neutral{font-size:15px;line-height:1}.matchup-chart td{height:32px}.matchup-chart tbody th{padding:5px 3px}:lang(en) .matchup-chart thead th:not(:first-child)>span{text-orientation:mixed;letter-spacing:0}}
@media(max-width:440px){.chart-heading h2{font-size:22px}.chart-legend{font-size:10px;gap:7px 12px}.chart-legend b{font-size:10px}.matchup-chart th:first-child{width:45px}.matchup-chart th{font-size:9px}.matchup-chart td{font-size:9px;height:29px}.matchup-chart td.neutral{font-size:13px}.matchup-chart thead th{height:86px}.matchup-chart thead th:not(:first-child)>span{letter-spacing:1px}.reference-next{padding:20px}.chart-section{margin-bottom:32px}}

.chart-axis-help{font-size:12px;font-weight:750;color:#304e77;line-height:1.7;margin:10px 0}.animal-scroll-hint{font-size:12px;color:#677b98;margin:4px 0 10px}.animal-scroll-hint:empty{display:none}.chart-selection{display:flex;flex-direction:column;gap:5px;min-height:74px;justify-content:center;padding:12px 16px;margin:14px 0;border:1px solid #dbe5f0;background:#f8faff;border-radius:8px}.chart-selection strong{font-size:15px;line-height:1.5;color:#29486c}.chart-selection span{font-size:12px;color:#536c88;line-height:1.7}.chart-selection.strong{border-color:#a9d7c4;background:#f1faf6}.chart-selection.strong strong{color:#106347}.chart-selection.weak{border-color:#e4b6bd;background:#fff5f6}.chart-selection.weak strong{color:#96374a}.matchup-chart thead th:first-child{white-space:pre-line;font-size:10px}.matchup-chart td{padding:0}.chart-cell{display:block;width:100%;height:38px;min-width:0;border:0;border-radius:0;padding:0;background:transparent;color:inherit;font:inherit;font-weight:inherit;cursor:pointer}.chart-cell[aria-pressed=true]{box-shadow:inset 0 0 0 2px #245fda}.chart-cell:hover,.chart-cell:focus-visible{outline:2px solid #245fda;outline-offset:-2px}.matchup-chart th.selected-axis{background:#245fda;color:white}.matchup-chart.horizontal-chart{overflow-x:auto;overflow-y:hidden;max-height:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.horizontal-chart table{width:100%;table-layout:fixed}.horizontal-chart th:first-child{width:80px}.horizontal-chart th,.horizontal-chart td{font-size:11px}.horizontal-chart thead th{height:52px;padding:8px 3px}.horizontal-chart thead th:not(:first-child)>span{writing-mode:horizontal-tb;letter-spacing:0;white-space:normal}.horizontal-chart .cell-value{display:inline}.horizontal-chart .cell-symbol{display:none}.horizontal-chart caption{white-space:normal;text-align:left}
@media(max-width:850px){.chart-cell{height:32px}.horizontal-chart .chart-cell{height:38px}.horizontal-chart td.neutral{font-size:11px}.horizontal-chart tbody th{padding:5px}.chart-legend{gap:7px 15px}}
@media(max-width:440px){.chart-cell{height:29px}.chart-axis-help,.animal-scroll-hint{font-size:11px}.chart-selection{padding:11px 12px;min-height:80px}.chart-selection strong{font-size:13px}.chart-selection span{font-size:10px}.chart-legend{font-size:10px;gap:6px 11px}.matchup-chart thead th:first-child{font-size:8px}}

.chart-selection{position:sticky;top:8px;z-index:5;box-shadow:0 3px 12px #173a680a}.horizontal-chart caption{white-space:normal}.horizontal-chart .chart-cell{height:38px}

.horizontal-chart th:first-child{position:sticky;left:0;z-index:2;background:#f1f5fc;box-shadow:1px 0 #dce5f2}.horizontal-chart thead th:first-child{background:#eaf1fc}.horizontal-chart th:first-child.selected-axis{background:#245fda;color:#fff}

/* Existing game portraits on pet matchup cards. */
.pet-portrait{display:grid;place-items:center;flex:0 0 auto;width:88px;height:88px;border:1px solid #e2e9f5;border-radius:14px;background:radial-gradient(ellipse at 50% 75%,#dce7f8 0,transparent 58%),#f6f9ff;overflow:hidden}.pet-portrait img{display:block;width:100%;height:100%;object-fit:contain;padding:5px}.pet-portrait[data-element=fire]{background:radial-gradient(ellipse at 50% 75%,#ffe0ca,transparent 60%),#fff8f3}.pet-portrait[data-element=grass],.pet-portrait[data-element=wood]{background:radial-gradient(ellipse at 50% 75%,#d8edc9,transparent 60%),#f7fbf1}.pet-portrait[data-element=dark]{background:radial-gradient(ellipse at 50% 75%,#ded9ef,transparent 60%),#f7f5fc}.portrait-fallback{font-size:24px;color:#5c7191;font-weight:800}.matchup-pet-heading{display:flex;align-items:center;gap:14px;margin-bottom:10px}.matchup-pet-copy{min-width:0}.matchup-pet-copy h4{overflow-wrap:anywhere}.selected-pet>.pet-portrait{width:120px;height:120px}.selected-pet-copy{min-width:0}.selected-pet .selected-element{display:inline-block;min-width:0;padding:4px 10px;font-size:11px;margin-bottom:6px;border-radius:5px}.selected-pet-copy>p{line-height:1.7}.selected-pet{gap:20px}#pet-options button{display:flex;align-items:center;gap:12px;padding:9px 13px}#pet-options .pet-portrait{width:48px;height:48px;border-radius:9px}#pet-options .pet-portrait img{padding:2px}.pet-option-copy{min-width:0}#pet-options .pet-option-copy>span{display:block}.matchup-pet .damage-pair{margin-top:8px}
@media(max-width:700px){.selected-pet>.pet-portrait{width:96px;height:96px}.selected-pet{gap:14px}.selected-pet h2{font-size:24px}.matchup-pet-heading{gap:16px}.pet-portrait{width:86px;height:86px}.matchup-pet h4{font-size:19px}.matchup-pet{padding:16px}}
@media(max-width:350px){.selected-pet>.pet-portrait{width:82px;height:82px}.selected-pet{gap:12px}.selected-pet h2{font-size:22px}.selected-pet-copy>p{font-size:10px}.matchup-pet-heading{gap:12px}.pet-portrait{width:76px;height:76px}.damage-pair{font-size:12px}}