.comparison-page-content{max-width:1200px;margin:0 auto;padding:0 1rem}.comparison-page-intro{text-align:center;margin-bottom:2rem;padding:1.5rem;background:var(--zn-card-gradient);border:1px solid var(--zn-border-primary);border-radius:12px}.comparison-page-intro h3{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:600;line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);margin:0 0 1rem;background:var(--zn-accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.comparison-page-intro p{font-family:var(--font-primary);font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--zn-text-secondary);margin:0}.character-comparison-container{display:flex;flex-direction:column;gap:2rem}.character-selector h2{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:600;line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);margin:0 0 1.5rem;text-align:center;background:var(--zn-accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.filter-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;padding:1rem;background:var(--zn-card-gradient);border:1px solid var(--zn-border-primary);border-radius:12px;flex-wrap:wrap}.filter-controls{display:flex;gap:.5rem;flex-wrap:wrap}.filter-select{font-family:var(--font-primary);font-size:var(--text-sm);font-weight:500;color:var(--zn-text-primary);background:var(--zn-bg-tertiary);border:1px solid var(--zn-border-primary);border-radius:6px;padding:.5rem .75rem;min-width:120px}.controls-right{display:flex;align-items:center;gap:1rem}.sort-controls{display:flex;gap:.5rem}.sort-btn{font-family:var(--font-primary);font-size:var(--text-sm);font-weight:600;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--zn-text-primary);background:var(--zn-bg-tertiary);border:1px solid var(--zn-border-primary);border-radius:6px;padding:.5rem .75rem;cursor:pointer}.sort-btn.active{background:var(--zn-primary-gradient);border-color:var(--zn-primary-amber);color:var(--zn-text-primary)}.reset-btn{font-family:var(--font-primary);font-size:var(--text-sm);font-weight:600;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--zn-text-primary);background:var(--zn-secondary-gradient);border:1px solid var(--zn-border-secondary);border-radius:6px;padding:.5rem 1rem;cursor:pointer}.character-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;margin-top:1.5rem}.comparison-container{background:var(--zn-card-gradient);border:1px solid var(--zn-border-primary);border-radius:16px;padding:2rem;margin-top:2rem;display:none}.comparison-container.active,.comparison-table-wrapper{display:block}.character-cards-view{display:none}@media (max-width: 768px){.comparison-table-wrapper{display:none}.character-cards-view{display:block}}.comparison-container h2{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:600;line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);margin-bottom:1.5rem;text-align:center;background:var(--zn-accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.cards-section-title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:600;line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);margin-bottom:1.5rem;text-align:center;background:var(--zn-accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.comparison-controls{display:flex;justify-content:center;margin-bottom:2rem}.clear-btn{font-family:var(--font-primary);font-size:var(--text-sm);font-weight:600;letter-spacing:var(--tracking-wide);text-transform:uppercase;background:var(--zn-secondary-gradient);color:var(--zn-text-primary);border:1px solid var(--zn-border-secondary);padding:.75rem 1.5rem;border-radius:8px;cursor:pointer}.character-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;width:100%;margin-top:1.5rem}.character-select-card{display:flex;align-items:center;gap:1rem;background:var(--zn-card-gradient);border:1px solid var(--zn-border-primary);border-radius:12px;padding:1.25rem;width:100%;text-align:left;cursor:pointer;min-height:120px;position:relative;overflow:hidden}.character-select-card[data-selected=true]{border-color:var(--zn-primary-amber);background:color-mix(in srgb,var(--zn-primary-amber) 10%,var(--zn-card-gradient))}.character-portrait-container{position:relative;flex-shrink:0;border-radius:12px;overflow:hidden}.character-portrait{width:70px;height:70px;border-radius:12px;object-fit:cover}.character-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.75rem}.character-name{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);margin:0 0 .5rem;background:var(--zn-accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.character-badges{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.5rem;align-items:center}.character-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}.stat-item{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-sm);padding:.4rem 0;border-bottom:1px solid color-mix(in srgb,var(--zn-border-primary) 30%,transparent)}.stat-item:last-child{border-bottom:none}.stat-label{font-family:var(--font-primary);font-weight:600;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--zn-primary-amber)}.stat-value{font-family:var(--font-display);font-weight:600;color:var(--zn-primary-teal)}.rarity-badge,.element-badge,.role-badge,.class-badge,.faction-badge{font-family:var(--font-primary);font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-wide);text-transform:uppercase;padding:.35rem .6rem;border-radius:6px;line-height:1.2;white-space:nowrap;flex-shrink:0}.premium-comparison-container{background:var(--zn-card-bg);border-radius:16px;overflow:hidden}.premium-character-headers{display:grid;grid-template-columns:repeat(4,1fr);background:color-mix(in srgb,var(--zn-primary-amber) 10%,transparent);border-bottom:1px solid var(--zn-border-primary);padding:1.5rem 1rem;gap:1rem}.premium-character-column{display:none}.premium-character-column[data-character]{display:block}.premium-character-card{text-align:center;padding:1rem;background:color-mix(in srgb,var(--zn-primary-amber) 5%,transparent);border-radius:12px;border:1px solid var(--zn-border-primary)}.character-portrait-container{width:100px;height:100px;margin:0 auto .75rem}.premium-portrait{width:100%;height:100%;border-radius:50%;border:2px solid var(--zn-primary-amber);object-fit:cover}.character-name{font-family:var(--font-display);font-size:var(--text-base);font-weight:600;line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);margin:0;background:var(--zn-accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.premium-stats-container{padding:1.5rem}.premium-section{margin-bottom:1.5rem;background:var(--zn-card-gradient);border-radius:12px;padding:1rem;border:1px solid var(--zn-border-primary)}.premium-section-header h4{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;line-height:var(--leading-tight);letter-spacing:var(--tracking-wide);margin:0 0 1rem;text-transform:uppercase;background:var(--zn-primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.premium-stat-row{display:flex;flex-direction:column;gap:.5rem;padding:.75rem 0;border-bottom:1px solid color-mix(in srgb,var(--zn-primary-amber) 10%,transparent)}.premium-stat-row:last-child{border-bottom:none}.premium-stat-values{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}.stat-label-premium{font-family:var(--font-primary);font-size:var(--text-sm);font-weight:600;line-height:var(--leading-normal);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--zn-primary-amber);text-align:center;margin-bottom:.5rem}.stat-value-premium{font-family:var(--font-primary);font-size:var(--text-sm);font-weight:500;line-height:var(--leading-normal);letter-spacing:var(--tracking-normal);color:var(--zn-text-primary);text-align:center;padding:.5rem;background:var(--zn-bg-tertiary);border-radius:6px;border:1px solid color-mix(in srgb,var(--zn-primary-amber) 20%,transparent);min-height:40px;display:flex;align-items:center;justify-content:center}.stat-value-premium.numeric{font-family:var(--font-display);font-weight:600;color:var(--zn-primary-teal)}.stat-value-premium.team-skill-name{font-family:var(--font-display);font-weight:600;color:var(--zn-primary-amber);text-transform:uppercase;letter-spacing:var(--tracking-wide)}.stat-value-premium.team-skill{font-family:var(--font-primary);font-weight:400;line-height:var(--leading-relaxed);color:var(--zn-text-secondary);text-align:left;padding:.75rem;min-height:auto;font-size:var(--text-xs)}.stat-value-premium.team-conditions{font-family:var(--font-primary);font-size:var(--text-xs);font-weight:500;font-style:italic;color:var(--zn-text-secondary);text-align:center;background:color-mix(in srgb,var(--zn-primary-amber) 10%,transparent);border-color:color-mix(in srgb,var(--zn-primary-amber) 25%,transparent)}.stat-value-premium .rarity-badge,.stat-value-premium .element-badge,.stat-value-premium .role-badge,.stat-value-premium .class-badge,.stat-value-premium .faction-badge{background:none;border:none;padding:0;margin:0;min-height:auto;font-size:var(--text-sm);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.character-comparison-card{background:var(--zn-card-gradient);border:1px solid var(--zn-border-primary);border-radius:12px;padding:1rem;margin-bottom:1rem}.card-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--zn-border-primary)}.card-info{flex:1;text-align:center}.card-portrait{width:60px;height:60px;border-radius:8px;object-fit:cover;border:1px solid var(--zn-primary-amber);flex-shrink:0}.card-info h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);margin:0 0 .5rem;background:var(--zn-accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.card-badges{display:flex;gap:.25rem;flex-wrap:wrap;justify-content:center}.card-section{margin-bottom:1rem}.card-section h4{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;line-height:var(--leading-tight);letter-spacing:var(--tracking-wide);margin:0 0 .75rem;text-transform:uppercase;background:var(--zn-primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.card-stats{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.card-stat{display:flex;justify-content:space-between;align-items:center;padding:.5rem;background:var(--zn-bg-tertiary);border-radius:6px;border:1px solid color-mix(in srgb,var(--zn-primary-amber) 15%,transparent)}.card-stat .stat-label{font-family:var(--font-primary);font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--zn-primary-amber)}.card-stat .stat-value{font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;color:var(--zn-primary-teal)}.card-team-skill{background:color-mix(in srgb,var(--zn-primary-amber) 10%,transparent);border:1px solid color-mix(in srgb,var(--zn-primary-amber) 25%,transparent);border-radius:8px;padding:1rem}.team-skill-name{font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;color:var(--zn-primary-amber);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:var(--tracking-wide)}.team-skill-description{font-family:var(--font-primary);font-size:var(--text-sm);font-weight:400;line-height:var(--leading-relaxed);color:var(--zn-text-secondary);margin-bottom:.75rem}.team-skill-conditions{font-family:var(--font-primary);font-size:var(--text-xs);font-weight:500;font-style:italic;color:var(--zn-text-secondary);padding:.5rem;background:color-mix(in srgb,var(--zn-primary-amber) 15%,transparent);border:1px solid color-mix(in srgb,var(--zn-primary-amber) 30%,transparent);border-radius:6px}.team-skill-conditions strong{color:var(--zn-primary-amber);font-weight:600}@media (max-width: 1024px) and (min-width: 769px){.premium-character-headers,.premium-stat-values{grid-template-columns:repeat(2,1fr)}.comparison-container{padding:1.5rem}}@media (max-width: 768px){.character-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.75rem;margin-top:1rem}.character-select-card{padding:1rem;flex-direction:column;text-align:center;gap:1rem;min-height:auto}.character-portrait{width:80px;height:80px}.character-info{gap:.75rem;width:100%}.character-badges{justify-content:center;gap:.3rem;margin-bottom:.5rem}.character-stats{grid-template-columns:1fr;gap:.5rem}.stat-item{padding:.5rem;background:var(--zn-bg-tertiary);border-radius:6px;border:1px solid color-mix(in srgb,var(--zn-primary-amber) 15%,transparent)}.stat-item:last-child{border-bottom:1px solid color-mix(in srgb,var(--zn-primary-amber) 15%,transparent)}.comparison-container{padding:1rem}.character-comparison-card{padding:.75rem}.card-stats{grid-template-columns:1fr;gap:.5rem}.card-header{flex-direction:column;text-align:center;gap:.75rem}.card-portrait{width:80px;height:80px}}@media (max-width: 480px){.character-grid{grid-template-columns:1fr;gap:.5rem;margin-top:.75rem}.character-select-card{padding:.75rem;gap:.75rem}.character-portrait{width:60px;height:60px}.character-badges{gap:.25rem}.character-stats{gap:.4rem}.comparison-container{padding:.75rem}.character-comparison-card{padding:.5rem;margin-bottom:.75rem}.card-section{margin-bottom:.75rem}.card-team-skill{padding:.75rem}}