.companions-container{background-color:var(--purple);grid-template-rows:auto 1fr;grid-template-areas:"header""main";min-height:100vh;display:grid}.companions-main{grid-area:main;padding:100px 40px 40px;position:relative;overflow:hidden}.companions-title-section{text-align:center;z-index:10}.companions-title{color:#fff;text-transform:uppercase;letter-spacing:4px;text-shadow:0 4px 8px rgba(0,0,0,.3),0 0 40px rgba(255,255,255,.2);margin-bottom:20px;font-size:4rem;font-weight:900;animation:.8s ease-out fadeInDown}.companions-subtitle{color:rgba(255,255,255,.9);max-width:700px;margin:0 auto;font-size:1.5rem;font-weight:600;line-height:1.6;animation:.8s ease-out .2s both fadeInUp}.companions-main .stars-container{z-index:0;opacity:.3;width:100vw;height:100vh;position:fixed;top:0;bottom:0;left:0;right:0}.companions-content{z-index:10;justify-content:center;align-items:center;gap:60px;max-width:1600px;margin:0 auto;animation:.8s ease-out .2s both fadeInUp;display:flex;position:relative}.character-display-section{flex-direction:column;flex:1;align-items:center;display:flex}.character-model{justify-content:center;align-items:center;width:100%;max-width:500px;height:500px;display:flex;position:relative}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.character-locked{color:rgba(255,255,255,.5);flex-direction:column;align-items:center;gap:20px;display:flex}.lock-icon{opacity:.5;font-size:180px}.character-locked p{text-transform:uppercase;letter-spacing:2px;font-size:1.5rem;font-weight:700}.character-selection{align-items:center;gap:20px;width:100%;max-width:620px;display:flex}.selection-arrow{background:linear-gradient(135deg,var(--purple),var(--light-purple));color:#fff;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:50px;height:50px;margin-top:30px;margin-bottom:10px;font-size:1.2rem;transition:all .3s;display:flex;box-shadow:0 8px 24px rgba(49,0,145,.4),0 0 0 3px rgba(255,255,255,.2)}.selection-arrow:hover{transform:scale(1.1);box-shadow:0 12px 32px rgba(49,0,145,.6),0 0 0 4px rgba(255,255,255,.3)}.selection-arrow:active{transform:scale(.95)}.character-thumbnails{scrollbar-width:none;scroll-behavior:smooth;flex:1;gap:16px;padding:0 20px;display:flex;overflow-x:auto}.character-thumbnails::-webkit-scrollbar{display:none}.character-thumbnail{background:linear-gradient(135deg,var(--purple),var(--light-purple));cursor:pointer;border:4px solid rgba(255,255,255,.3);border-radius:16px;flex-shrink:0;width:100px;height:100px;margin:30px 0 10px;transition:all .3s;position:relative;overflow:hidden}.character-thumbnail:hover{border-color:rgba(255,255,255,.6);transform:translateY(-8px);box-shadow:0 12px 24px rgba(49,0,145,.5)}.character-thumbnail.active{border-color:#fff;transform:translateY(-12px)scale(1.1);box-shadow:0 0 12px rgba(255,255,255,.4),0 0 5px rgba(255,255,255,.3)}.thumbnail-image{object-fit:cover;width:100%;height:100%}.character-thumbnail.locked{opacity:.5;cursor:not-allowed}.thumbnail-lock{color:#fff;background:rgba(0,0,0,.6);border-radius:12px;justify-content:center;align-items:center;font-size:2rem;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.character-info-section{flex:1;max-width:600px}.info-card{-webkit-backdrop-filter:blur(20px)saturate(180%);background:rgba(15,15,35,.5);border:1px solid rgba(0,245,255,.3);border-radius:24px;padding:2px;position:relative;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5),0 8px 32px rgba(0,245,255,.15)}.info-card:before{content:"";pointer-events:none;background:linear-gradient(135deg,rgba(0,245,255,.05) 0%,transparent 50%,rgba(0,245,255,.05) 100%);border-radius:24px;position:absolute;top:0;bottom:0;left:0;right:0}.info-card-header{z-index:1;align-items:center;gap:20px;padding:20px;display:flex;position:relative}.character-portrait{background:rgba(0,245,255,.1);border:2px solid rgba(0,245,255,.4);border-radius:16px;flex-shrink:0;width:100px;height:100px;position:relative;overflow:hidden;box-shadow:0 4px 20px rgba(0,245,255,.2),inset 0 0 20px rgba(0,245,255,.05)}.character-portrait img{object-fit:cover;width:100%;height:100%}.portrait-lock{color:#fff;background:rgba(49,0,145,.7);justify-content:center;align-items:center;font-size:2.5rem;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.character-name-section{flex-direction:column;flex:1;gap:8px;display:flex}.character-name{color:#00f5ff;text-transform:uppercase;letter-spacing:3px;text-shadow:0 0 20px rgba(0,245,255,.5),0 2px 10px rgba(0,0,0,.3);margin:0;font-size:2.5rem;font-weight:900;line-height:1}.character-name.coming-soon{color:rgba(255,255,255,.5);text-shadow:none}.coming-soon-badge{color:#fff;text-transform:uppercase;letter-spacing:1px;background:linear-gradient(135deg,#ffb703,#fb8500);border-radius:20px;align-items:center;padding:8px 12px;font-size:.8rem;font-weight:700;line-height:1;display:inline-flex;box-shadow:0 4px 8px rgba(251,133,0,.3)}.info-puzzle-piece{color:#00f5ff;flex-shrink:0;width:50px;height:50px;margin-left:20px;margin-right:20px}.puzzle-icon{filter:drop-shadow(0 0 8px rgba(0,245,255,.5));width:100%;height:100%}.character-colors{z-index:1;justify-content:center;gap:16px;padding:16px 20px;display:flex;position:relative}.hr-line{border-top:1px solid rgba(0,245,255,.2);margin:0 20px}.color-option{cursor:pointer;border:none;border-radius:50%;width:60px;height:60px;transition:all .3s;position:relative;box-shadow:0 4px 12px rgba(0,0,0,.3),inset 0 2px 4px rgba(255,255,255,.2)}.color-option:hover:not(:disabled){border-color:rgba(0,245,255,.5);transform:scale(1.15);box-shadow:0 8px 20px rgba(0,0,0,.4),0 0 20px rgba(0,245,255,.3),inset 0 2px 4px rgba(255,255,255,.3)}.color-option:active:not(:disabled){transform:scale(1.05)}.color-option:disabled{opacity:.4;cursor:not-allowed}.character-description{z-index:1;border-radius:0 0 20px 20px;min-height:180px;padding:20px 30px}.character-description:before{content:"";pointer-events:none;background:linear-gradient(135deg,rgba(0,245,255,.05) 0%,rgba(138,43,226,.05) 100%);border-radius:0 0 20px 20px;position:absolute;top:0;bottom:0;left:0;right:0}.character-description p{color:rgba(255,255,255,.9);text-align:justify;z-index:1;text-shadow:0 2px 8px rgba(0,0,0,.3);margin:0;font-size:1.1rem;font-weight:600;line-height:1.7;position:relative}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media (max-width:1200px){.companions-content{flex-direction:column;gap:40px}.character-display-section,.character-info-section{width:100%;max-width:600px}}@media (max-width:768px){.companions-main{padding:80px 20px 20px}.character-model{max-width:calc(66vh - 132px);height:calc(55vh - 110px)}.selection-arrow{width:40px;height:40px;font-size:1rem}.color-option{width:50px;height:50px}.companions-title{font-size:2.5rem}.character-selection{justify-content:center;align-items:center;gap:10px;width:100%;max-width:100%;position:absolute;bottom:0;left:0;right:0}.companions-content{gap:0}.info-card{flex-direction:column;min-height:calc(45vh - 90px);max-height:calc(45vh - 90px);margin-bottom:120px;display:flex}.stars-container{height:100vh}.character-thumbnail,.character-portrait{width:70px;height:70px}.character-name{font-size:1.25rem}.character-colors{gap:12px}.color-option{border-width:3px;width:45px;height:45px}.lock-icon{font-size:120px}.info-puzzle-piece{margin-left:10px;margin-right:10px}.character-description{flex:1;min-height:0;padding:16px 24px;overflow-y:auto}.character-colors{padding:12px}.character-description p{font-size:.9rem}.info-card-header{padding-bottom:16px}}