@import "https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Inter:wght@400;500;600;700&display=swap";
:root{--bg-dark:#0f1115;--bg-panel:#1a1c23;--bg-panel-hover:#23262f;--text-primary:#e4e4e6;--text-secondary:#a0a4b0;--accent-gold:#c69b6d;--accent-gold-hover:#e0b481;--horde-red:#8c1616;--alliance-blue:#004a93;--fel-green:#37c837;--dk:#c41e3a;--dh:#a330c9;--druid:#ff7c0a;--evoker:#33937f;--hunter:#abd473;--mage:#3fc7eb;--monk:#00ff98;--paladin:#f48cba;--priest:#fff;--rogue:#fff468;--shaman:#0070de;--warlock:#8788ee;--warrior:#c69b6d;--font-heading:"Cinzel",serif;--font-body:"Inter",sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;background-image:radial-gradient(circle at 100% 0,#8c16160d 0%,#0000 40%),radial-gradient(circle at 0 100%,#c69b6d0d 0%,#0000 40%);min-height:100vh;line-height:1.6}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--accent-gold);letter-spacing:.05em;text-transform:uppercase;font-weight:700}a{color:var(--accent-gold);text-decoration:none;transition:color .2s}a:hover{color:var(--accent-gold-hover)}.container{max-width:1200px;margin:0 auto;padding:0 2rem}.panel{background:var(--bg-panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #c69b6d33;border-radius:8px;padding:1.5rem;box-shadow:0 8px 32px #0000004d}.title-xl{text-shadow:0 4px 20px #00000080;margin-bottom:1rem;font-size:4rem;line-height:1.1}.subtitle{color:var(--text-secondary);max-width:600px;margin-bottom:2rem;font-size:1.25rem}.btn-primary{background:linear-gradient(180deg,var(--horde-red)0%,#5a0b0b 100%);color:#fff;font-family:var(--font-heading);cursor:pointer;border:1px solid #ffffff1a;border-radius:4px;justify-content:center;align-items:center;padding:.75rem 1.5rem;font-size:1.1rem;font-weight:700;transition:all .2s;display:inline-flex;box-shadow:0 4px 15px #8c161666}.btn-primary:hover{color:#fff;background:linear-gradient(#a61b1b 0%,#761010 100%);transform:translateY(-2px);box-shadow:0 6px 20px #8c161699}.btn-secondary{color:var(--accent-gold);border:1px solid var(--accent-gold);font-family:var(--font-heading);cursor:pointer;background:0 0;border-radius:4px;justify-content:center;align-items:center;padding:.75rem 1.5rem;font-size:1.1rem;font-weight:700;transition:all .2s;display:inline-flex}.btn-secondary:hover{background:#c69b6d1a;transform:translateY(-2px)}.header{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:100;background:#0f1115cc;border-bottom:1px solid #c69b6d1a;height:80px;position:fixed;top:0;left:0;right:0}.header-content{justify-content:space-between;align-items:center;height:100%;display:flex}.logo{color:var(--accent-gold);align-items:center;gap:.5rem;font-size:1.5rem;display:flex}.nav-links{align-items:center;gap:2rem;display:flex}.nav-link{font-family:var(--font-heading);color:var(--text-primary);font-size:1rem}.nav-link:hover{color:var(--accent-gold)}.hero{flex-direction:column;justify-content:center;min-height:90vh;padding-top:140px;padding-bottom:80px;display:flex;position:relative;overflow:hidden}.hero:after{content:"";z-index:-1;background:radial-gradient(circle,#8c161626 0%,#0000 70%);border-radius:50%;width:600px;height:600px;position:absolute;top:50%;right:-10%}.hero-actions{gap:1rem;display:flex}.char-avatar{background:#2a2d36;border:2px solid #3a3d46;border-radius:8px;justify-content:center;align-items:center;width:64px;height:64px;font-size:1.5rem;display:flex}.char-info{flex:1}.char-name{margin-bottom:.25rem;font-size:1.2rem;font-weight:600}.char-details{color:var(--text-secondary);align-items:center;gap:.5rem;font-size:.9rem;display:flex}.badge{background:#ffffff1a;border-radius:12px;padding:.15rem .5rem;font-size:.75rem;font-weight:600}.badge-tank{color:var(--fel-green);background:#37c83733}.badge-dps{color:#ff6b6b;background:#c8373733}.badge-healer{color:#6bb5ff;background:#3796ff33}.section{padding:5rem 0}.section-title{text-align:center;margin-bottom:3rem;font-size:2.5rem}.section-title:after{content:"";background:var(--accent-gold);width:60px;height:3px;margin:1rem auto 0;display:block}html{scroll-behavior:smooth}@keyframes skeleton-shimmer{0%{background-position:-600px 0}to{background-position:600px 0}}.skeleton{background:linear-gradient(90deg,#ffffff0a 25%,#ffffff1a 50%,#ffffff0a 75%) 0 0/600px 100%;border-radius:6px;animation:1.5s linear infinite skeleton-shimmer}.skeleton-text{border-radius:4px;height:.85em}.skeleton-avatar{border-radius:50%}.skeleton-card{border-radius:14px}.skeleton-badge{border-radius:20px;height:1.4em}.skeleton-button{border-radius:8px;height:2.5rem}@keyframes fade-in-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-in-right{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}.animate-fade-up{animation:.45s cubic-bezier(.22,1,.36,1) both fade-in-up}.animate-fade-in{animation:.3s both fade-in}.stagger-children>*{animation:.4s cubic-bezier(.22,1,.36,1) both fade-in-up}.stagger-children>:first-child{animation-delay:0s}.stagger-children>:nth-child(2){animation-delay:60ms}.stagger-children>:nth-child(3){animation-delay:.12s}.stagger-children>:nth-child(4){animation-delay:.18s}.stagger-children>:nth-child(5){animation-delay:.24s}.stagger-children>:nth-child(6){animation-delay:.3s}.stagger-children>:nth-child(7){animation-delay:.36s}.stagger-children>:nth-child(8){animation-delay:.42s}.stagger-children>:nth-child(n+9){animation-delay:.48s}@keyframes modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes modal-panel-in{0%{opacity:0;transform:scale(.95)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes modal-panel-out{0%{opacity:1;transform:scale(1)translateY(0)}to{opacity:0;transform:scale(.95)translateY(20px)}}.modal-backdrop{animation:.2s both modal-backdrop-in}.modal-panel{animation:.3s cubic-bezier(.34,1.56,.64,1) both modal-panel-in}.card-hover{transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,border-color .2s}.card-hover:hover{transform:translateY(-3px);box-shadow:0 8px 32px #0006}.btn-primary:active,.btn-secondary:active{transition:transform .1s;transform:translateY(0)scale(.97)}@keyframes pulse-glow-gold{0%,to{box-shadow:0 0 #c69b6d00}50%{box-shadow:0 0 8px 3px #c69b6d59}}@keyframes pulse-glow-green{0%,to{box-shadow:0 0 #10b98100}50%{box-shadow:0 0 8px 3px #10b98159}}.pulse-gold{animation:2s ease-in-out infinite pulse-glow-gold}.pulse-green{animation:2s ease-in-out infinite pulse-glow-green}@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:.8s linear infinite spin}@keyframes tooltip-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}[data-tooltip]:hover:after{animation:.15s both tooltip-in}input:focus,textarea:focus,select:focus{outline:none;transition:box-shadow .2s,border-color .2s;box-shadow:0 0 0 2px #c69b6d59;border-color:#c69b6d99!important}@keyframes tab-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.tab-content-active{animation:.25s cubic-bezier(.22,1,.36,1) both tab-in}.roster-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-top:2rem;display:grid}.character-card{align-items:center;gap:1rem;transition:transform .2s;display:flex}.character-card:hover{border-color:#c69b6d66;transform:translateY(-4px)}