.page-header{padding:3rem 0;text-align:center;background:linear-gradient(180deg,rgba(147,51,234,.1) 0%,transparent 100%)}.subtitle{font-size:1.25rem;color:var(--color-gray-300)}.roster-content{padding:4rem 0}.roster-info{text-align:center;max-width:800px;margin:0 auto 3rem}.loading{text-align:center;padding:3rem;color:var(--color-gray-400);font-size:1.25rem}.error-message{text-align:center;padding:2rem;background:#dc26261a;border:1px solid rgba(220,38,38,.3);border-radius:.5rem;color:#fecaca;max-width:600px;margin:0 auto}.hidden{display:none!important}.roster-section{margin-bottom:3rem}.role-title{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1.5rem;font-size:2rem}.role-icon{font-size:1.5rem}.roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;max-width:1200px;margin:0 auto}.roster-card{background:#1e293bcc;border:1px solid rgba(147,51,234,.3);border-left:3px solid var(--class-color, #888);border-radius:.5rem;padding:1rem;transition:transform .2s,box-shadow .2s,border-color .2s;cursor:pointer}.roster-card:hover,.roster-card:focus{transform:translateY(-2px);box-shadow:0 4px 12px #9333ea33;border-color:#9333ea80;outline:none}.roster-card:focus-visible{box-shadow:0 0 0 2px var(--class-color, #9333ea)}.card-content{display:flex;gap:1rem;align-items:center}.avatar-container{flex-shrink:0;width:64px;height:64px;border-radius:.5rem;overflow:hidden;background:#0000004d;border:2px solid var(--class-color, #888)}.player-avatar{width:100%;height:100%;object-fit:cover}.avatar-placeholder{display:flex;align-items:center;justify-content:center}.avatar-initial{font-size:1.5rem;font-weight:700;color:var(--class-color, #888)}.card-info{flex:1;min-width:0}.card-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.25rem}.player-name{font-size:1.125rem;font-weight:600;color:#fff;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.officer-badge{flex-shrink:0;font-size:.625rem;background:#9333ea4d;color:#a78bfa;padding:.125rem .375rem;border-radius:9999px;text-transform:uppercase;letter-spacing:.05em}.card-info p{margin:.125rem 0;font-size:.8125rem}.player-realm{color:var(--color-gray-400)}.player-class{font-weight:500}.player-ilvl{color:#10b981;font-weight:600}.card-expand-icon{flex-shrink:0;color:var(--color-gray-500);transition:color .2s,transform .2s}.roster-card:hover .card-expand-icon,.roster-card:focus .card-expand-icon{color:var(--class-color, #9333ea);transform:translate(3px)}.recruitment-notice{text-align:center;max-width:600px;margin:4rem auto 0;padding:2rem}.recruitment-notice h3{color:var(--color-teal);margin-bottom:1rem}.recruitment-notice p{margin-bottom:1.5rem}.modal-overlay{position:fixed;inset:0;background:#000000d9;backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:linear-gradient(180deg,#1e293bfa,#0f172afa);border:1px solid rgba(147,51,234,.3);border-radius:1rem;max-width:800px;width:100%;max-height:90vh;overflow-y:auto;position:relative;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-close{position:absolute;top:1rem;right:1rem;background:#00000080;border:1px solid rgba(255,255,255,.1);color:#fff;width:2.5rem;height:2.5rem;border-radius:50%;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;z-index:10}.modal-close:hover{background:#dc262680;transform:scale(1.1)}.modal-body{display:flex;gap:2rem;padding:2rem}.modal-render-section{flex:0 0 420px;display:flex;align-items:center;justify-content:center}.render-container{position:relative;width:100%;max-width:420px}.render-glow{position:absolute;inset:-20%;width:140%;height:140%;filter:blur(40px);opacity:.4;pointer-events:none}.render-image{position:relative;width:100%;height:auto;border-radius:.5rem;z-index:1}.modal-info-section{flex:1;min-width:0}.modal-name{font-size:2rem;font-weight:700;margin:0 0 .25rem}.modal-realm{color:var(--color-gray-400);margin:0 0 .25rem;font-size:1rem}.modal-spec-class{font-size:1.125rem;font-weight:500;margin:0 0 1.5rem}.modal-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem}.stat-card{background:#0000004d;border-radius:.5rem;padding:1rem;text-align:center}.stat-value{display:block;font-size:1.5rem;font-weight:700;line-height:1.2}.stat-label{display:block;font-size:.75rem;color:var(--color-gray-400);text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem}.stat-ilvl .stat-value{color:#10b981}.stat-mplus .stat-value{color:#f97316}.stat-achieve .stat-value{color:#eab308}.modal-details{background:#0003;border-radius:.5rem;padding:1rem;margin-bottom:1.5rem}.detail-row{display:flex;justify-content:space-between;padding:.375rem 0;border-bottom:1px solid rgba(255,255,255,.05)}.detail-row:last-child{border-bottom:none}.detail-label{color:var(--color-gray-400)}.detail-value{color:#fff;font-weight:500}.modal-links{display:flex;flex-wrap:wrap;gap:.75rem}.external-link{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#9333ea33;border:1px solid rgba(147,51,234,.3);border-radius:.5rem;color:#a78bfa;text-decoration:none;font-size:.875rem;font-weight:500;transition:background .2s,border-color .2s,transform .2s}.external-link:hover{background:#9333ea4d;border-color:#9333ea80;transform:translateY(-1px)}.external-link svg{flex-shrink:0}@media (max-width: 768px){.roster-grid{grid-template-columns:1fr;max-width:400px}.modal-body{flex-direction:column;align-items:center;padding:1.5rem}.modal-render-section{flex:none;width:100%;max-width:280px}.modal-info-section{width:100%;text-align:center}.modal-name{font-size:1.5rem}.modal-stats-grid{grid-template-columns:repeat(2,1fr)}.modal-stats-grid .stat-card:last-child{grid-column:span 2}.modal-details{text-align:left}.modal-links{justify-content:center}}