.pipe.h,.pipe.v{transform:translate(-50%,-40%)}#load-ui button:hover,#rank-filter button:hover,#recommendation-ui button:hover,#save-ui button:hover,.button-row button:hover,.dropdown-menu button:hover,.menu-button:hover{background-color:#404060}#ninja-pool,.right-panel{background-color:#1a1a2e}#combo-list,.grid{margin-bottom:20px}body,h1{margin:0}.menu-button,nav a{text-decoration:none}#stats-output,.stats-output-style{font-weight:700;text-align:center}body{font-family:"Barlow Condensed",sans-serif;background-color:#0e0e15;color:#fff;display:flex;justify-content:center;align-items:flex-start;padding:100px 20px 20px}.container{display:flex;gap:30px;width:100%;max-width:1200px;align-items:stretch}.left-panel{flex:1}.right-panel{flex:1;padding:20px;border-radius:12px;display:flex;flex-direction:column;min-height:600px}#ninja-pool,.grid{display:grid;gap:10px}.grid{grid-template-columns:repeat(5,60px);grid-template-rows:repeat(3,60px)}.grid img{width:60px;height:60px;border-radius:60px;border:2px solid #555;cursor:pointer;background-color:#222}.grid-slot{position:relative}.grid-slot img[alt=Empty]{pointer-events:none;user-select:none;filter:brightness(60%)}#ninja-pool{grid-template-columns:repeat(auto-fill,minmax(50px,1fr));max-height:300px;overflow-y:auto;border-radius:8px}#ninja-pool img{width:50px;height:50px;border-radius:50px;cursor:pointer;border:2px solid transparent;transition:border-color .2s;-webkit-tap-highlight-color:transparent}#ninja-pool img:hover{border-color:#00f0ff}#rank-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;justify-content:flex-start}#rank-filter button.active-rank{background-color:#404060;-webkit-tap-highlight-color:transparent}#load-ui button,#rank-filter button,#recommendation-ui button,#save-ui button,.button-row button{padding:6px 12px;border:none;border-radius:6px;background-color:#2c2c40;color:#fff;cursor:pointer;transition:background-color .2s;-webkit-tap-highlight-color:transparent}#combo-list{background-color:#121225;padding:10px;border-radius:6px;max-height:200px;overflow-y:auto;flex-grow:1}#stats-output{background-color:#191932;padding:10px;border:2px solid #c7eaf6;border-radius:5px;color:#c7eaf6;font-size:16px;max-width:210px}.button-row{display:flex;gap:10px;margin-bottom:10px}#load-ui,#save-ui{display:flex;align-items:center}#save-ui input::placeholder{color:#888}#ninja-pool img.selected{border-color:#00f0ff!important;box-shadow:0 0 8px #00f0ff}body.home{background:linear-gradient(to bottom,#0e0e15,#1a1a2e);text-align:center;padding:40px 20px}.banner{margin-bottom:40px}.logo{width:100px;height:auto;margin-bottom:10px}h1{font-size:2.5rem;color:#00f0ff}.subtitle{font-size:1rem;color:#aaa}.menu{display:flex;flex-direction:column;gap:20px;max-width:300px;margin:0 auto}.menu-button{display:block;padding:12px 20px;background-color:#2c2c40;border-radius:8px;color:#fff;font-weight:700;transition:background-color .2s}#ninja-pool,.navbar,nav{display:flex}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#1a1a2e;border-radius:8px}::-webkit-scrollbar-thumb{background-color:#2c2c40;border-radius:8px}::-webkit-scrollbar-thumb:hover{background-color:#404060}.navbar{position:absolute;top:10px;left:20px;right:40px;justify-content:space-between;align-items:center;z-index:2}.navbar img.logo{height:80px;width:auto}nav a{margin-left:12px;margin-top:-11px;padding:6px 14px;border:2px solid #c7eaf6;border-radius:5px;background:0 0;color:#c7eaf6;font-weight:600;transition:.2s}nav a:hover{background-color:rgba(0,0,0,.6);box-shadow:0 0 10px #c7eaf6}nav a.active{background-color:#003c52;color:#fff}.hero-banner{position:fixed;top:0;left:0;width:100%;height:100%;background:url("../assets/banner.webp") center center/cover no-repeat;z-index:-1}.overlay,.pipe{position:absolute}.overlay{inset:0;background-color:rgba(0,0,0,.55);z-index:-1}#load-ui,#recommendation-ui,#save-ui{display:flex;gap:10px;margin-bottom:15px;align-items:center}#load-ui select,#recommendation-ui select,#save-ui input{padding:6px 10px;border-radius:6px;border:1px solid #444;background-color:#121225;color:#fff;font-size:14px}.stats-output-style{background-color:#191932;padding:10px;border:2px solid #c7eaf6;border-radius:5px;color:#c7eaf6;font-size:16px;max-width:210px;margin:0 auto}#color-score-ui,#color-score-ui-mobile,.pipe{border:none!important;background:0 0!important}.desktop-only{display:block}.mobile-only{display:none}#stats-output,#stats-output-mobile{cursor:pointer;transition:opacity .2s,transform .2s}#stats-output-mobile:hover,#stats-output:hover{opacity:.8}#color-score-ui,#color-score-ui-mobile{padding:0!important;text-align:left!important;font-size:14px;line-height:1.5}#ninja-pool{flex-wrap:wrap;justify-content:center;gap:6px;padding:10px}.pipe{width:30px!important;height:30px!important;max-width:30px!important;max-height:30px!important;pointer-events:none;object-fit:contain;z-index:0;box-shadow:none!important;outline:0!important}.ninja-img,.ninja-wrapper{border-radius:50%;position:relative}.pipe.h{top:50%;left:calc(100% - -18px)}.pipe.v{left:50%;top:calc(100% - -15px)}.ninja-wrapper{width:50px;height:50px;overflow:visible}.ninja-img{width:100%;height:100%;z-index:1}.glow-overlay,.tooltip-box{position:absolute;pointer-events:none}.glow-overlay{top:-4px;left:-4px;width:58px!important;height:58px!important;z-index:2}.tooltip-box{background-color:#121225;color:#c7eaf6;padding:6px 10px;border-radius:6px;font-size:13px;max-width:max-content;z-index:999;box-shadow:0 0 10px rgba(0,0,0,.5);white-space:pre;transition:opacity .2s}.dropdown{position:relative;display:inline-block}.dropdown-menu{position:absolute;top:100%;left:0;background-color:#2c2c40;border-radius:6px;padding:6px 0;display:flex;flex-direction:column;z-index:10}.dropdown-menu button{background:0 0;border:none;color:#fff;padding:6px 12px;text-align:left;cursor:pointer}@media (max-width:768px){.container{flex-direction:column;align-items:center}.left-panel,.right-panel{width:100%;max-width:100%;min-height:600px}#rank-filter,.grid{justify-content:center}nav a{padding:3px 8px;font-size:15px}#load-ui,#save-ui{flex-direction:column;align-items:stretch}#load-ui button,#load-ui select,#save-ui button,#save-ui input{width:100%}.button-row button{width:auto!important;min-width:unset!important;padding:4px 8px;font-size:13px}.desktop-only{display:none!important}.mobile-only{display:block;margin-bottom:20px;text-align:center;padding-left:0}#stats-output-mobile{font-size:14px;padding:6px 8px;max-width:180px;margin:0 auto}#rank-filter{justify-content:flex-start!important}#ninja-pool{grid-template-columns:repeat(auto-fill,minmax(40px,1fr));height:200px;justify-content:center;padding:12px 8px}#color-score-ui-mobile{text-align:center!important}}@media (min-width:769px){#stats-output.desktop-only{margin-left:0;text-align:left}#color-score-ui{margin:10px 0 0!important;text-align:left!important}.pipe.h,.pipe.v{transform:translate(-50%,-40%)}.grid{grid-template-columns:repeat(5,70px);grid-template-rows:repeat(3,70px);gap:15px}.grid img{width:70px;height:70px;border-radius:70px}.pipe{width:32px!important;height:32px!important;max-width:32px!important;max-height:32px!important}.pipe.h{left:calc(100% - -20px)}.pipe.v{top:calc(100% - -17px)}#ninja-pool img,.ninja-wrapper{width:60px;height:60px}#ninja-pool img{border-radius:60px}.glow-overlay{width:68px!important;height:68px!important}.left-panel{display:flex;flex-direction:column;align-items:center}#slots{margin:0}.button-row{justify-content:center;margin-top:20px}}