.class-filter{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1.2rem}.filter-btn{padding:0.35rem 0.9rem;border-radius:20px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-muted);font-size:0.8rem;cursor:pointer;transition:all 0.15s}.filter-btn:hover{border-color:var(--gold);color:var(--gold)}.filter-btn.active{background:var(--gold);border-color:var(--gold);color:var(--bg-deep);font-weight:600}.class-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:1rem}.class-card{background:var(--bg-card);border:2px solid var(--border);border-radius:8px;padding:0;overflow:hidden;cursor:pointer;transition:border-color 0.2s,transform 0.15s,box-shadow 0.2s;display:flex;flex-direction:column;min-width:0}.class-card__img{width:100%;height:auto;aspect-ratio:1/1;overflow:hidden;border-radius:8px 8px 0 0;background:var(--bg-deep);border-bottom:1px solid rgba(201,162,39,0.2);display:flex;align-items:center;justify-content:center}.class-card__img img{width:100%;height:100%;object-fit:contain;object-position:center center;transition:transform 0.3s}.class-card:hover .class-card__img img{transform:scale(1.03)}.class-card__body{padding:1.1rem 1rem;display:flex;flex-direction:column;flex:1 1 auto}.class-card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 4px 16px rgba(201,162,39,0.15)}.class-card.selected{border-color:var(--gold);background:rgba(201,162,39,0.06);box-shadow:0 0 0 3px rgba(201,162,39,0.2)}.class-card.hidden{display:none}.class-card__name{font-family:'Cinzel',serif;font-size:1rem;color:var(--gold-light);margin-bottom:0.35rem}.class-card__stats{font-size:0.75rem;color:var(--text-muted);margin-bottom:0.5rem}.class-card__desc{font-size:0.78rem;color:var(--text-dim);line-height:1.45;margin-bottom:0.5rem}.class-card__tags{display:flex;flex-wrap:wrap;gap:0.3rem;margin-top:0.4rem}.class-tag{font-size:0.68rem;padding:0.15rem 0.5rem;border-radius:10px;background:rgba(201,162,39,0.1);border:1px solid rgba(201,162,39,0.3);color:var(--gold)}.class-tag--spell{background:rgba(140,90,200,0.15);border-color:rgba(140,90,200,0.4);color:#b080e0}.class-card__select{text-align:center;margin-top:auto;padding-top:0.8rem}@media (max-width:760px){.class-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:0.8rem}.class-card__body{padding:0.95rem 0.85rem}}@media (max-width:520px){.class-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.class-card__name{font-size:0.9rem}.class-card__desc{font-size:0.74rem}}@media (max-width:390px){.class-grid{grid-template-columns:1fr}}