@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Inter:wght@300;400;500;600;700&display=swap";:root{--gold: #d4a843;--gold-light: #f0d68a;--gold-dark: #a07830;--blue: #1a73e8;--blue-dark: #0d47a1;--bg-primary: #0b0e17;--bg-card: #111827;--bg-card-hover: #1a2235;--text-primary: #f0f0f0;--text-secondary: #9ca3af;--border: rgba(255, 255, 255, .08);--tank: #4fc3f7;--fighter: #ef5350;--assassin: #ab47bc;--mage: #7e57c2;--marksman: #ffa726;--support: #66bb6a}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg-primary);color:var(--text-primary);font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--gold-dark);border-radius:4px}.header{position:relative;overflow:hidden;padding:3rem 1.5rem 2.5rem;text-align:center;background:linear-gradient(135deg,#0b0e17,#1a1a2e,#16213e);border-bottom:2px solid var(--gold-dark)}.header:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 0%,rgba(212,168,67,.15) 0%,transparent 70%);pointer-events:none}.header-content{position:relative;z-index:1}.logo-icon{font-size:3rem;margin-bottom:.5rem;filter:drop-shadow(0 0 20px rgba(212,168,67,.4))}.header h1{font-family:Cinzel,serif;font-size:clamp(1.8rem,5vw,3rem);font-weight:900;letter-spacing:.08em;background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 50%,var(--gold-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-transform:uppercase;margin-bottom:.25rem}.header .subtitle{font-family:Cinzel,serif;font-size:clamp(.8rem,2vw,1.1rem);color:var(--gold);letter-spacing:.25em;text-transform:uppercase;font-weight:600}.header .tagline{margin-top:1rem;color:var(--text-secondary);font-size:.95rem;max-width:500px;margin-left:auto;margin-right:auto}.stats-bar{display:flex;justify-content:center;gap:2rem;margin-top:1.5rem;flex-wrap:wrap}.stat-item{text-align:center}.stat-value{font-family:Cinzel,serif;font-size:1.5rem;font-weight:700;color:var(--gold-light)}.stat-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--text-secondary)}.filter-section{padding:1.5rem;display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;background:#111827cc;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.filter-btn{padding:.5rem 1.25rem;border:1px solid var(--border);background:transparent;color:var(--text-secondary);border-radius:2rem;cursor:pointer;font-size:.85rem;font-weight:500;transition:all .25s ease;font-family:Inter,sans-serif}.filter-btn:hover{border-color:var(--gold);color:var(--gold);background:#d4a84314}.filter-btn.active{background:linear-gradient(135deg,var(--gold-dark),var(--gold));color:#0b0e17;border-color:var(--gold);font-weight:600}.search-container{display:flex;justify-content:center;padding:1rem 1.5rem 0}.search-input{width:100%;max-width:400px;padding:.65rem 1rem .65rem 2.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:.5rem;color:var(--text-primary);font-size:.9rem;font-family:Inter,sans-serif;outline:none;transition:border-color .25s}.search-input:focus{border-color:var(--gold)}.search-wrapper{position:relative;width:100%;max-width:400px}.search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--text-secondary);font-size:.9rem;pointer-events:none}.hero-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;padding:1.5rem;max-width:1200px;margin:0 auto}@media(min-width:640px){.hero-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}.hero-card{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:.75rem;overflow:hidden;cursor:pointer;transition:all .3s ease}.hero-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 12px 40px #d4a84326;background:var(--bg-card-hover)}.hero-portrait{width:100%;aspect-ratio:3 / 4;display:flex;align-items:center;justify-content:center;font-size:3.5rem;position:relative;overflow:hidden}.hero-portrait:after{content:"";position:absolute;bottom:0;left:0;right:0;height:60%;background:linear-gradient(to top,var(--bg-card) 0%,transparent 100%)}.hero-card:hover .hero-portrait:after{background:linear-gradient(to top,var(--bg-card-hover) 0%,transparent 100%)}.hero-info{padding:.75rem;position:relative;z-index:1;margin-top:-2rem}.hero-name{font-family:Cinzel,serif;font-size:.85rem;font-weight:700;color:var(--text-primary);margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-title{font-size:.7rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.5rem}.hero-meta{display:flex;justify-content:space-between;align-items:center}.role-badge{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:.15rem .5rem;border-radius:1rem;border:1px solid}.difficulty-dots{display:flex;gap:3px}.difficulty-dot{width:6px;height:6px;border-radius:50%;background:#ffffff26}.difficulty-dot.filled{background:var(--gold)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.modal{background:var(--bg-card);border:1px solid var(--gold-dark);border-radius:1rem;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;animation:slideUp .3s ease}.modal-header{position:relative;padding:2rem 1.5rem 1.5rem;text-align:center;background:linear-gradient(135deg,rgba(212,168,67,.08),transparent);border-bottom:1px solid var(--border)}.modal-portrait{font-size:4rem;margin-bottom:.75rem}.modal-name{font-family:Cinzel,serif;font-size:1.5rem;font-weight:700;color:var(--gold-light);margin-bottom:.25rem}.modal-title{font-size:.9rem;color:var(--text-secondary);font-style:italic}.modal-close{position:absolute;top:1rem;right:1rem;background:#ffffff0d;border:1px solid var(--border);color:var(--text-secondary);width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all .2s}.modal-close:hover{background:#ffffff1a;color:var(--text-primary)}.modal-body{padding:1.5rem}.modal-section{margin-bottom:1.25rem}.modal-section:last-child{margin-bottom:0}.modal-section-title{font-family:Cinzel,serif;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);margin-bottom:.75rem}.modal-roles{display:flex;gap:.5rem;flex-wrap:wrap}.modal-role-badge{padding:.3rem .75rem;border-radius:1.5rem;font-size:.75rem;font-weight:600;border:1px solid}.modal-stats{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.modal-stat{background:#ffffff08;border:1px solid var(--border);border-radius:.5rem;padding:.75rem}.modal-stat-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);margin-bottom:.25rem}.modal-stat-value{font-family:Cinzel,serif;font-size:1.1rem;font-weight:700;color:var(--gold-light)}.stat-bar-bg{height:4px;background:#ffffff14;border-radius:2px;margin-top:.4rem;overflow:hidden}.stat-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--gold-dark),var(--gold-light));transition:width .6s ease}.modal-lore{font-size:.85rem;color:var(--text-secondary);line-height:1.7}.modal-abilities{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.ability-card{background:#ffffff08;border:1px solid var(--border);border-radius:.5rem;padding:.5rem;text-align:center;transition:border-color .2s}.ability-card:hover{border-color:var(--gold-dark)}.ability-icon{font-size:1.5rem;margin-bottom:.25rem}.ability-name{font-size:.6rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.no-results{text-align:center;padding:4rem 1.5rem;color:var(--text-secondary)}.no-results-icon{font-size:3rem;margin-bottom:1rem}.no-results-text{font-size:1rem}.footer{text-align:center;padding:2rem;border-top:1px solid var(--border);color:var(--text-secondary);font-size:.75rem}.footer a{color:var(--gold);text-decoration:none}.bg-pattern{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:-1;background-image:radial-gradient(circle at 20% 50%,rgba(26,115,232,.03) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(212,168,67,.03) 0%,transparent 50%)}