.archetypes-showcase{z-index:5;background:linear-gradient(#08080ad9 0%,#0c0a08cc 50%,#08080ad9 100%),url(/images/archetypes.webp) 50%/cover no-repeat;justify-content:center;align-items:center;padding:120px 6%;display:flex;position:relative;overflow:hidden}.archetypes-bg-glow{pointer-events:none;z-index:1;background:radial-gradient(circle,#d4af371a 0%,#ff8c2b0a 40%,#0000 70%);width:800px;height:800px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.showcase-container{z-index:3;grid-template-columns:380px 1fr;align-items:center;gap:60px;width:100%;max-width:1400px;margin:0 auto;display:grid;position:relative}.showcase-title{font-family:var(--font-cinzel),serif;color:#fff;text-transform:uppercase;-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#fff 0%,#d4af37 50%,#fff 100%) 0 0/200%;-webkit-background-clip:text;background-clip:text;margin:15px 0 25px;font-size:36px;line-height:1.2;animation:4s linear infinite gold-shine}@keyframes gold-shine{0%{background-position:0%}to{background-position:200%}}.showcase-desc{color:#a09080;margin-bottom:30px;font-size:16px;line-height:1.7}.showcase-nav{flex-direction:column;gap:8px;display:flex}.showcase-nav-item{cursor:pointer;text-align:left;-webkit-user-select:none;user-select:none;background:linear-gradient(135deg,#14120fcc 0%,#0f0e0ce6 100%);border:1px solid #d4af3726;align-items:center;gap:14px;padding:12px 18px;transition:all .3s;display:flex;position:relative;overflow:hidden}.showcase-nav-item:before{content:"";background:linear-gradient(90deg,#d4af3733,#0000);width:0;transition:width .3s;position:absolute;top:0;bottom:0;left:0}.showcase-nav-item.active:before,.showcase-nav-item:hover:before{width:100%}.nav-icon{color:#d4af3780;z-index:1;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;transition:all .3s;display:flex}.nav-icon svg{width:20px;height:20px}.showcase-nav-item.active .nav-icon,.showcase-nav-item:hover .nav-icon{color:#d4af37;filter:drop-shadow(0 0 6px #d4af3780)}.nav-name{text-transform:uppercase;letter-spacing:.08em;color:#777;z-index:1;font-size:14px;font-weight:600;transition:color .3s}.showcase-nav-item.active .nav-name,.showcase-nav-item:hover .nav-name{color:#fff}.nav-indicator{opacity:0;background:#d4af37;border-radius:50%;width:6px;height:6px;transition:all .3s;position:absolute;right:14px;transform:scale(0);box-shadow:0 0 8px #d4af3799}.showcase-nav-item.active .nav-indicator{opacity:1;transform:scale(1)}.showcase-nav-item:hover,.showcase-nav-item.active{border-color:#d4af3766;transform:translate(5px)}.showcase-main{flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.render-frame{justify-content:center;align-items:center;margin-top:30px;margin-bottom:30px;display:flex;position:relative}.character-display{display:inline-block;position:relative}.character-render{display:none}.character-render.active{display:block}.character-render img{object-fit:contain;background:linear-gradient(#d4af3708 0%,#0003 100%);border:2px solid #d4af3759;width:auto;max-height:420px;display:block;box-shadow:0 15px 50px #00000080,0 0 25px #d4af3714}.character-render.active img{animation:5s ease-in-out infinite idle-float}@keyframes idle-float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.character-info-overlay{text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#14120ff2 0%,#0c0c0efa 100%);border:1px solid #d4af3740;max-width:500px;padding:30px 40px;position:relative;box-shadow:0 20px 50px #00000080}.character-info-overlay:before{content:"";background:linear-gradient(90deg,#0000,#d4af37,#0000);width:120px;height:2px;position:absolute;top:0;left:50%;transform:translate(-50%)}.info-icon{color:#d4af37;filter:drop-shadow(0 0 8px #d4af3766);width:40px;height:40px;margin:0 auto 12px}.info-icon svg{width:100%;height:100%}.character-info-overlay h3{font-family:var(--font-cinzel),serif;color:#d4af37;text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px;font-size:24px}.character-info-overlay p{color:#b5b0a5;font-size:14px;line-height:1.6}@media (max-width:1100px){.showcase-container{grid-template-columns:1fr;gap:40px}.showcase-sidebar{order:2}.showcase-main{order:1}.showcase-nav{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}}@media (max-width:768px){.archetypes-showcase{padding:80px 5%}.showcase-title{font-size:28px}.showcase-nav-item{padding:10px 14px}.nav-icon{width:24px;height:24px}.nav-icon svg{width:18px;height:18px}.nav-name{font-size:12px}.character-render img{max-height:320px}.character-info-overlay{padding:24px 28px}.character-info-overlay h3{font-size:20px}}@media (max-width:480px){.archetypes-showcase{padding:60px 4%}.showcase-nav{grid-template-columns:1fr}.character-render img{max-height:280px}.info-icon{width:32px;height:32px}.character-info-overlay{padding:20px 24px}}