.tier-list{max-width:1200px;margin:0 auto;padding:20px}.tier-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.title-section{display:flex;justify-content:center;margin:20px 0}.editable-title{margin:0;cursor:pointer;padding:8px 16px;border:2px solid transparent;border-radius:6px;transition:background-color .2s ease}.editable-title:hover{background-color:rgba(0,0,0,.1)}.title-input{font-size:2em;font-weight:700;text-align:center;padding:8px 16px;border-radius:6px;min-width:200px}.header-buttons{display:flex;gap:10px}.add-item-button,.reset-button{padding:10px 20px;color:white;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease,transform .1s ease}.add-item-button{background-color:#4CAF50}.add-item-button:hover{background-color:#45a049;transform:translateY(-1px)}.add-item-button:active{background-color:#3e8e41;transform:translateY(0)}.reset-button{background-color:#ff4757}.reset-button:hover{background-color:#ff3742;transform:translateY(-1px)}.reset-button:active{background-color:#ff2936;transform:translateY(0)}.tier-row{display:grid;grid-template-columns:100px 1fr auto;margin-bottom:0;border:2px solid #ddd;overflow:hidden;min-height:80px;transition:background-color .2s ease;position:relative}.tier-label{width:100px;min-height:80px;font-weight:700;font-size:24px;color:white;text-shadow:1px 1px 2px rgba(0,0,0,.7);border-right:2px solid #ddd;text-align:center;padding:8px 4px;overflow:hidden;box-sizing:border-box;grid-column:1;position:relative}.tier-label,.tier-name{display:flex;align-items:center;justify-content:center}.tier-name{position:absolute;top:0;left:4px;right:4px;bottom:0;padding:2px;border-radius:3px;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;overflow:hidden}.tier-name-input{border-radius:4px;padding:4px 6px;font-size:18px;font-weight:700;text-align:center;color:#333;text-shadow:none;width:70px}.tier-drag-handle{width:20px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.1);color:#666;cursor:-webkit-grab;cursor:grab;font-size:16px;font-weight:700;transition:background-color .2s ease;border-left:1px solid rgba(0,0,0,.1);grid-column:3}.tier-drag-handle:hover{background:rgba(0,0,0,.2);color:#333}.tier-drag-handle:active{cursor:-webkit-grabbing;cursor:grabbing}.tier-items{flex-wrap:wrap;gap:0;padding:0 30px 0 0;background-color:#f9f9f9;grid-column:2}.draggable-item,.tier-items{display:flex;align-items:center;min-height:80px}.draggable-item{width:80px;height:80px;justify-content:center;border-radius:0;cursor:-webkit-grab;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none;font-weight:500;color:white;text-shadow:1px 1px 2px rgba(0,0,0,.7);border:2px solid rgba(255,255,255,.3);transition:transform .2s ease,box-shadow .2s ease;text-align:center;font-size:12px;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;padding:4px;line-height:1.1;container-type:size;box-sizing:border-box;flex-shrink:0;overflow:hidden}.draggable-item:hover{transform:scale(1.05);box-shadow:0 4px 8px rgba(0,0,0,.2)}.draggable-item:active{cursor:-webkit-grabbing;cursor:grabbing}.draggable-item.selected{border:3px solid #007bff;box-shadow:0 0 10px rgba(0,123,255,.5);transform:scale(1.05)}.item-name,.item-name-overlay{display:block;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.item-name-overlay{background:rgba(0,0,0,.7);padding:4px 8px;border-radius:4px;margin:4px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.unranked-section{margin-top:30px}.unranked-section h3{color:#666;margin-bottom:15px;font-size:18px}.unranked-section .tier-row{border-color:#999}.unranked-section .tier-label{background-color:#888!important;font-size:14px}.unranked-section .tier-name{white-space:nowrap}.unranked-section .tier-items{padding-right:10px}.popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000}.popup-form{background:white;padding:30px;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.3);width:400px;max-width:90vw}.popup-form h3{margin:0 0 20px;color:#333;font-size:24px;text-align:center}.popup-form.drag-over{border:3px dashed #007acc;background:rgba(0,122,204,.05)}.input-with-button{position:relative;display:flex}.input-with-button input{flex:1 1;border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-right:none!important;padding-right:8px!important}.input-with-image{background-color:#f5f5f5!important;color:#666!important}.input-button{border:2px solid #ddd;border-left:none;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:6px;border-bottom-right-radius:6px;background:#f8f8f8;cursor:pointer;padding:0 12px;display:flex;align-items:center;justify-content:center;color:#666;min-width:44px}.input-with-button input:focus{border-color:#007bff;outline:none}.input-with-button input:focus~.input-button{border-color:#007bff}.input-with-button .input-button:hover{background-color:#e8e8e8;border:2px solid #ddd}.input-with-button input:focus~.input-button:hover{border-color:#007bff;border-left:2px solid #007bff}.input-button-remove{background:#ffe6e6!important;color:#dc3545!important;border:2px solid #dc3545!important}.input-button-remove:hover{background:#ffcccc!important;border-color:#c82333!important;color:#c82333!important;border-left:2px solid #c82333!important}.input-with-button input:focus~.input-button-remove{border-color:#dc3545!important}.input-with-button input:focus~.input-button-remove:hover{border-color:#c82333!important;border-left:2px solid #c82333!important}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:#555}.form-group input{width:100%;padding:12px;border:2px solid #ddd;border-radius:6px;font-size:16px;box-sizing:border-box}.form-group input:focus{outline:none;border-color:#007bff}.form-buttons{display:flex;gap:10px;justify-content:flex-end;margin-top:25px}.form-buttons button{padding:12px 20px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease,transform .1s ease}.form-buttons button:first-child{background-color:#007bff;color:white}.form-buttons button:first-child:hover:not(:disabled){background-color:#0056b3;transform:translateY(-1px)}.form-buttons button:first-child:disabled{background-color:#cccccc;cursor:not-allowed;transform:none}.form-buttons button:last-child{background-color:#6c757d;color:white}.form-buttons button:last-child:hover{background-color:#5a6268;transform:translateY(-1px)}.form-buttons button:focus{outline:2px solid #007acc;outline-offset:2px}.form-buttons button:focus:not(:focus-visible){outline:none}.input-hint{color:#666;font-size:12px;margin-top:4px;display:block}