.custom-tier-list{max-width:1200px;margin:0 auto;padding:1rem}.tier-management{background-color:#14181d;border:1px solid #22282f;padding:1rem;margin-bottom:2rem;text-align:center}.tier-management h3{color:#fff;font-weight:300;margin-bottom:1rem;margin-top:0}.tier-controls{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}.tier-btn{background-color:#202442;color:#fff;border:none;padding:.5rem 1rem;cursor:pointer;font-size:.9rem;transition:background-color .3s ease}.tier-btn:hover{background-color:#14181d}.tier-container{margin-bottom:2rem}.tier-row{display:flex;margin-bottom:1rem;min-height:120px}.tier-label{min-width:150px;width:150px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-weight:800;font-size:1.8rem;color:#000;position:relative;padding:.5rem;font-family:inherit}.tier-name-input{background:none;border:none;color:#000;font-weight:800;font-size:1.8rem;text-align:center;width:100%;margin:auto 0;transition:font-size .2s ease,height .2s ease;overflow:hidden;resize:none;padding:0;min-height:auto;display:block;font-family:inherit}.tier-name-input:focus{outline:2px solid rgba(255,255,255,.5)}.tier-actions{position:absolute;top:.25rem;left:.25rem;right:.25rem;display:flex;justify-content:space-between;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}.tier-label:hover .tier-actions{opacity:1;visibility:visible}.tier-action-btn{background:#0000004d;border:none;color:#fff;cursor:pointer;padding:.25rem;font-size:.8rem;transition:background-color .3s ease}.tier-action-btn:hover{background:#0009}.tier-characters{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.5rem;padding:.5rem;min-height:110px;background-color:#0f1419;border:2px dashed #22282f;margin-left:.5rem;cursor:pointer;transition:background-color .2s,border-color .2s;position:relative}.tier-characters:hover{background-color:#4caf500d;border-color:#4caf50}.tier-add-hint{color:#666;font-style:italic;grid-column:1 / -1;text-align:center;align-self:center;font-size:.9rem;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:color .2s}.tier-characters:hover .tier-add-hint{color:#4caf50}.tier-characters .tier-add-hint i{font-size:1.2rem}.tier-characters:has(.tier-assigned) .tier-add-hint{display:none}.filters-section{margin-bottom:2rem}.character-pool{background-color:#14181d;border:1px solid #22282f;padding:1rem}.character-pool h3{color:#fff;font-weight:300;margin-bottom:1rem;text-align:center;margin-top:0}.pool-characters{min-height:200px;padding:.5rem;background-color:#0f1419;border:2px dashed #22282f;position:relative}.pool-characters:empty:after{content:"All characters assigned to tiers";color:#666;font-style:italic;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.9rem}.tier-assigned{cursor:move;transition:transform .2s ease,opacity .2s ease}.tier-assigned.dragging{opacity:.5}.tier-assigned:hover{transform:scale(1.05)}.pool-characters .character{cursor:move}.pool-characters .character:hover{transform:scale(1.05);transition:transform .2s ease}.tier-characters .character{width:90px;height:120px;background-color:#0f1419;border:1px solid #22282f;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative;transition:all .2s ease;cursor:move}.tier-characters .character:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000004d}.tier-characters .character .img-wrapper{position:absolute;top:0;left:0;width:100%;height:100px;overflow:hidden}.tier-characters .character .bg{position:absolute;top:0;left:0;width:100%;height:100px;background-size:cover;background-position:center}.tier-characters .character img,.tier-characters .character .character-portrait{position:absolute;top:0;left:0;width:100%;height:100px;object-fit:cover;z-index:1}.tier-characters .character .margin,.tier-characters .character .character-name{background-color:#14181d;width:100%;padding:.25rem;text-align:center;position:relative;z-index:2;pointer-events:none}.tier-characters .character .margin .content h2,.tier-characters .character .character-name h2{color:#fff;font-size:.7rem;font-weight:400;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}.tier-characters .character a,.tier-characters .character a:hover,.tier-characters .character a:visited,.tier-characters .character a:focus{text-decoration:none;border-bottom:none}.pool-characters .character a,.pool-characters .character a:hover,.pool-characters .character a:visited,.pool-characters .character a:focus{text-decoration:none;border-bottom:none}.tier-characters .character.ur{background-image:linear-gradient(to top,#ba0707cc,#f09a9acc)}.tier-characters .character.ssr{background-image:linear-gradient(to top,#ffb348cc,#fff457cc)}.tier-characters .character.sr{background-image:linear-gradient(to top,#7028e4cc,#e5b2cacc)}.tier-characters .character.r{background-image:linear-gradient(to top,#0090ffcc,#9acbf0cc)}.tier-characters .character.n{background-image:linear-gradient(to top,#008202cc,#9af0aacc)}.tier-characters .character.vivacious,.tier-characters .character.creator{background:linear-gradient(to top,#ffb348,#fff457)}.tier-characters .character.madness,.tier-characters .character.explicator{background-image:linear-gradient(to top,#ba0707cc,#f09a9acc)}.tier-characters .character.depressed,.tier-characters .character.destroyer{background:linear-gradient(to top,#7028e4,#e5b2ca)}.tier-characters .character.composed,.tier-characters .character.consolidator{background:linear-gradient(to top,#0090ff,#9acbf0)}.tier-characters .character.innocence,.tier-characters .character.computator{background:linear-gradient(to top,#008202,#9af0aa)}.tier-characters .character.resonance{background:conic-gradient(from 0deg,#ffd12f,#fc7d40,#afe276,#2addff,#8478e0,#ffd12f 360deg)}.tier-characters.drag-over{background-color:#40b5501a;border-color:#4caf50}.pool-characters.drag-over{background-color:#f443361a;border-color:#f44336}.color-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.color-modal-content{background-color:#14181d;border:1px solid #22282f;padding:1.5rem;max-width:400px;width:90%}.color-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;border-bottom:1px solid #22282f;padding-bottom:1rem}.color-modal-header h4{color:#fff;margin:0;font-weight:300}.close-modal{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.close-modal:hover{background-color:#ffffff1a}.color-picker-container{margin-bottom:1.5rem}#color-picker{width:100%;height:50px;border:none;cursor:pointer;margin-bottom:1rem}.color-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.color-preset{width:40px;height:40px;cursor:pointer;border:2px solid transparent;transition:border-color .3s ease}.color-preset:hover{border-color:#fff}.color-modal-actions{display:flex;gap:.5rem;justify-content:flex-end}@media (max-width: 768px){.tier-row{flex-direction:column}.tier-label{width:100%;min-height:60px;flex-direction:row;justify-content:space-between}.tier-name-input{font-size:1.4rem;margin-bottom:0;margin-right:.5rem}.tier-controls{flex-direction:column;align-items:center}.tier-btn{width:100%;max-width:200px}.color-modal-content{margin:1rem}.color-presets{grid-template-columns:repeat(3,1fr)}}.character-popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;z-index:10000;align-items:center;justify-content:center;padding:2rem}.character-popup .popup-content{background:#14181d;width:100%;max-width:1400px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}.character-popup .popup-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;background:#0d1116}.character-popup .popup-header h2{margin:0;color:#fff;font-weight:300}.character-popup .close-btn{background:none;border:none;font-size:2rem;cursor:pointer;color:#fff;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.character-popup .close-btn:hover{background-color:#ffffff1a}.character-popup .popup-filters{padding:1rem 2rem 0}.character-popup .popup-filters .character-filters{margin-bottom:.5rem}.character-popup .popup-filters .filters{margin-bottom:0}.character-popup .popup-filters .character-skills,.character-popup .popup-filters .advanced-filters,.character-popup .popup-filters .reset-filters{display:none!important}.selected-chars-preview{display:flex;flex-wrap:nowrap;gap:.5rem;min-height:40px;padding:.75rem 2rem;background:#0a0d10;margin:1rem 2rem 0;border:1px solid #22282f;align-items:center}.selected-chars-preview .placeholder{color:#666;font-style:italic;font-size:.9rem}.selected-char-tag{background:#202442;padding:.25rem .75rem;font-size:.85rem;color:#fff;border:1px solid #4caf50}.chars-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.75rem;padding:1.5rem 2rem;overflow-y:auto;flex:1;min-height:0}.char-grid-item{display:flex;flex-direction:column;align-items:center;padding:0;cursor:pointer;border:2px solid transparent;background:#0f1419;transition:all .15s;position:relative;overflow:hidden;min-height:135px}.char-grid-item:hover{background:#202442;border-color:#3a3f6a}.char-grid-item.selected{border-color:#4caf50;background:#4caf5026}.char-grid-item.already-assigned{opacity:.5}.char-grid-item.already-assigned:hover{opacity:.7}.char-grid-item img{width:100%;height:100px;object-fit:cover;object-position:center center;display:block;position:relative;z-index:1}.char-grid-item .char-bg{position:absolute;top:0;left:0;right:0;height:100px;z-index:0}.char-grid-item .char-bg.ssr{background-image:linear-gradient(to top,#ffb348cc,#fff457cc)}.char-grid-item .char-bg.sr{background-image:linear-gradient(to top,#7028e4cc,#e5b2cacc)}.char-grid-item .char-bg.r{background-image:linear-gradient(to top,#0090ffcc,#9acbf0cc)}.char-grid-item .char-bg.n{background-image:linear-gradient(to top,#008202cc,#9af0aacc)}.char-grid-item .char-bg.ur{background-image:linear-gradient(to top,#ba0707cc,#f09a9acc)}.char-grid-item .char-bg.vivacious{background-image:linear-gradient(to top,#ffb348cc,#fff457cc)}.char-grid-item .char-bg.depressed{background-image:linear-gradient(to top,#7028e4cc,#e5b2cacc)}.char-grid-item .char-bg.innocence{background-image:linear-gradient(to top,#008202cc,#9af0aacc)}.char-grid-item .char-bg.madness{background-image:linear-gradient(to top,#ba0707cc,#f09a9acc)}.char-grid-item .char-bg.composed{background-image:linear-gradient(to top,#0090ffcc,#9acbf0cc)}.char-grid-item .char-bg.resonance{background:conic-gradient(from 0deg,#ffd12f,#fc7d40,#afe276,#2addff,#8478e0,#ffd12f 360deg)}.char-grid-name{font-size:.7rem;text-align:center;padding:.4rem .25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;color:#fff;background:#0f1419;position:relative;z-index:2;min-height:1.5em}.assigned-badge{position:absolute;top:.25rem;right:.25rem;background:#ffc107e6;color:#000;font-size:.6rem;padding:.1rem .3rem;font-weight:600;z-index:3}.selected-check{position:absolute;top:.25rem;left:.25rem;background:#4caf50;color:#fff;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.8rem;z-index:3}.popup-footer{display:flex;justify-content:flex-end;gap:.75rem;padding:1rem 2rem;background:#0d1116;border-top:1px solid #22282f}@media (max-width: 768px){.character-popup{padding:0}.character-popup .popup-content{max-height:100vh;height:100vh}.character-popup .popup-header{padding:1rem}.character-popup .popup-filters{padding:.5rem 1rem 0}.selected-chars-preview{margin:.5rem 1rem 0;padding:.5rem 1rem}.chars-grid{padding:1rem;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:.5rem}.char-grid-item{min-height:100px}.char-grid-item img{height:70px}.char-grid-name{font-size:.6rem;padding:.25rem .15rem}.popup-footer{padding:1rem}}