#tier-list-rank{display:flex;flex-direction:column;gap:24px}#tier-list-rank .rank-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}@media(max-width:767px){#tier-list-rank .rank-header{flex-direction:column}}#tier-list-rank .rank-info{display:flex;flex-direction:column;gap:8px}#tier-list-rank .rank-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}@media(max-width:767px){#tier-list-rank .rank-actions{width:100%}#tier-list-rank .rank-actions button{flex:1}}#tier-list-rank .rank-back{display:flex;align-items:center;gap:8px;font-size:clamp(14px,1.6vw,16px);color:#f5f6f7b8;text-decoration:none}#tier-list-rank .rank-back svg{width:16px;height:16px}#tier-list-rank .rank-title{display:flex;align-items:center;gap:16px}#tier-list-rank .rank-title h1{font-size:clamp(24px,3vw,32px)}#tier-list-rank .rank-title .badge{padding:6px 12px;background:#303237;border-radius:4px;font-size:clamp(14px,1.6vw,16px);color:#dfdfdf}#tier-list-rank .rank-desc{font-size:clamp(16px,1.8vw,18px);color:#fffc}#tier-list-rank .tier-list{display:flex;flex-direction:column;gap:12px}#tier-list-rank .tier-row{position:relative;display:flex;align-items:center;padding:8px;gap:16px;min-height:138.18px;background:#202228;border:1px solid #40444E;border-radius:12px}#tier-list-rank .tier-row.drop-active{border-color:#3fa3677a;background:#3fa36710}#tier-list-rank .tier-row.tier-s{border-color:#d7bf7e;box-shadow:0 0 12px #d7bf7e26}@media(max-width:767px){#tier-list-rank .tier-row{flex-direction:column;align-items:stretch}}#tier-list-rank .tier-label{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:8px;width:128px;min-width:128px;align-self:stretch;min-height:96px;background:var(--tier-color, rgba(245, 246, 247, .1019607843));border:none;border-radius:8px}#tier-list-rank .tier-label .tier-letter{font-family:Karla,sans-serif;font-size:48px;letter-spacing:-.04em;line-height:140%;color:#1c1d21;text-align:center;word-break:break-word}#tier-list-rank .tier-label .tier-letter.longer{font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;line-height:1.2}#tier-list-rank .tier-label .tier-letter.longest{font-size:clamp(14px,1.4vw,20px);letter-spacing:-.01em;line-height:1.2}#tier-list-rank .tier-label .tier-count{font-size:clamp(16px,1.8vw,18px);color:#1c1d21cc;text-align:center}@media(max-width:767px){#tier-list-rank .tier-label{flex-direction:row;width:100%;min-height:auto;gap:12px}#tier-list-rank .tier-label .tier-letter{font-size:32px}#tier-list-rank .tier-label .tier-letter.longer{font-size:22px}#tier-list-rank .tier-label .tier-letter.longest{font-size:16px}}#tier-list-rank .drop-divider{width:3px;align-self:stretch;background:#3fa3677a;border-radius:2px}#tier-list-rank .tier-items{display:flex;flex-wrap:wrap;gap:8px;flex:1;align-content:center;align-items:flex-start;overflow-y:auto}#tier-list-rank .tier-items.tier-collapsed{max-height:360px}@media(max-width:767px){#tier-list-rank .tier-items{min-height:auto}}#tier-list-rank .tier-expand svg{width:16px;height:16px;transition:transform .3s ease}#tier-list-rank .tier-controls{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:4px;flex-shrink:0;align-self:stretch}@media(max-width:767px){#tier-list-rank .tier-controls{flex-direction:row;justify-content:flex-end}}#tier-list-rank .tier-arrows{display:flex;flex-direction:column}#tier-list-rank .tier-arrows button{background:none;border:none;cursor:pointer;color:#f5f6f7b8;padding:2px}#tier-list-rank .tier-arrows button svg{width:20px;height:20px}#tier-list-rank .tier-arrows button:hover{color:#f5f6f7}#tier-list-rank .tier-arrows .arrow-up svg{transform:rotate(180deg)}#tier-list-rank .preview-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}@media(max-width:767px){#tier-list-rank .preview-actions{width:100%}}#tier-list-rank .preview-grid{display:flex;flex-wrap:wrap;gap:12px}@media(max-width:767px){#tier-list-rank .preview-grid{gap:8px}}#tier-list-rank .add-tier{display:flex;justify-content:center;align-items:center;gap:12px;padding:12px;height:clamp(64px,8vw,88px);background:#202228;border:1px dashed #40444E;border-radius:12px;cursor:pointer;color:#f5f6f7e0;font-size:clamp(20px,2.2vw,22px);font-weight:500;transition:border-color .3s ease}#tier-list-rank .add-tier:hover{border-color:#f5f6f740}#tier-list-rank .add-tier svg{width:24px;height:24px}.tu-card.tier-skin{width:clamp(120px,10vw,145px);border-right:1px solid var(--tier-color, #636363);border-bottom:1px solid var(--tier-color, #636363);border-left:1px solid var(--tier-color, #636363);cursor:grab;touch-action:none}.tu-card.tier-skin:active{cursor:grabbing}.tu-card.tier-skin img{pointer-events:none}.tu-card.tier-skin .tu-card-img{height:110px;padding:6px 10px}.tu-card.tier-skin .tu-card-img img{width:100%;height:100%;object-fit:contain}.tu-card.tier-skin .tu-card-info{padding:0 8px 8px}.tu-card.tier-skin .tu-card-name{font-size:clamp(14px,1.6vw,16px);margin-bottom:0;white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tu-card.tier-skin .tier-skin-action{position:absolute;top:6px;z-index:2;width:24px;height:24px;min-width:0;padding:4px;color:#f5f6f7b8;opacity:0;transition:opacity .2s ease,color .2s ease,background .4s ease}.tu-card.tier-skin .tier-skin-action svg{width:16px;height:16px}.tu-card.tier-skin .tier-skin-action:hover{color:#f5f6f7;background:#f5f6f70f}.tu-card.tier-skin .tier-skin-expand{right:6px}.tu-card.tier-skin .tier-skin-link{left:6px}@media(hover:hover){.tu-card.tier-skin:hover .tier-skin-action{opacity:1}}.unranked-sticky{position:sticky;bottom:0;z-index:10;background:#27292f;border-top:1px solid #40444E;transition:border-color .2s ease}.unranked-sticky.drop-active{border-color:#3fa3677a}.unranked-inner{display:flex;flex-direction:column;gap:12px;max-width:clamp(1400px,100vw,1800px);margin:0 auto;padding:clamp(0px,2vw - 16px,10px) clamp(12px,3vw,56px)}.unranked-inner .unranked-header{display:flex;justify-content:space-between;align-items:center}.unranked-inner .unranked-header h3{font-size:clamp(18px,2vw,20px);font-weight:500;color:#f5f6f7e0}@media(max-width:767px){.unranked-inner .unranked-header h3{font-size:clamp(16px,1.8vw,18px)}}.unranked-inner .unranked-header .btn-tertiary svg{transition:transform .3s ease}.unranked-inner .unranked-grid{display:flex;flex-wrap:wrap;gap:12px;max-height:190px;align-items:flex-start;overflow-y:auto}@media(max-width:767px){.unranked-inner .unranked-grid{gap:8px}}.unranked-inner .unranked-grid.expanded{max-height:35vh}.edit-tier-modal{display:flex;flex-direction:column;width:min(650px,92vw);max-height:90vh;margin:auto;padding:0;background:#27292f;color:#f5f6f7;border:1px solid #383C46;border-radius:12px;overflow:hidden}.edit-tier-modal::backdrop{background:#0000007a}.edit-tier-modal header{display:flex;justify-content:space-between;align-items:center;padding:24px 32px 0}.edit-tier-modal header .sub{margin:0}.edit-tier-modal .form{padding:32px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;flex:1;min-height:0}.edit-tier-modal .field{display:flex;flex-direction:column;gap:6px;border:none;padding:0;margin:0}.edit-tier-modal .label{display:inline-flex;align-items:center;gap:4px;font-family:Roboto Flex,Roboto Flex Fallback,sans-serif;font-size:14px;font-weight:500;line-height:145%;color:#f5f6f7b8;text-transform:uppercase;padding:0}.edit-tier-modal .required{font-size:12px;font-weight:500;color:#e56969}.edit-tier-modal .field>input[type=text]{height:44px;padding:12px;background:transparent;color:#f5f6f7;font-family:Roboto Flex,Roboto Flex Fallback,sans-serif;font-size:16px;border:1px solid #40444E;border-radius:4px;transition:border-color .15s ease}.edit-tier-modal .field>input[type=text]::placeholder{color:#f5f6f77a}.edit-tier-modal .field>input[type=text]:focus{outline:none;border-color:#3fa367}.edit-tier-modal .field>input[type=text].error,.edit-tier-modal .field>input[type=text].error:focus{border-color:#e56969}.edit-tier-modal .field-error{font-family:Roboto Flex,Roboto Flex Fallback,sans-serif;font-size:13px;color:#e56969}.edit-tier-modal .color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:4px}.edit-tier-modal .color-swatch{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px;height:76px;background:transparent;border:1px solid rgba(245,246,247,.16);border-radius:6px;cursor:pointer;color:#f5f6f7;transition:border-color .15s ease,background .15s ease}.edit-tier-modal .color-swatch:hover{border-color:#f5f6f766}.edit-tier-modal .color-swatch.selected{border-color:#3fa367;background:#3fa3670f}.edit-tier-modal .color-swatch .swatch-fill{width:24px;height:24px;border-radius:4px;background:var(--swatch);box-shadow:inset 0 0 0 1px #0000002e}.edit-tier-modal .color-swatch .swatch-label{font-size:14px;line-height:1}.edit-tier-modal .color-swatch-custom .custom-fill{background:conic-gradient(from 0deg,#f07878,#f0c878,#c8f078,#78f0c8,#78d8f0,#a878f0,#f078c8,#f07878)}.edit-tier-modal .color-swatch-custom .swatch-label{font-family:Roboto Flex,Roboto Flex Fallback,sans-serif;font-variant-numeric:tabular-nums;font-size:12px;letter-spacing:.02em}.edit-tier-modal .custom-picker-panel{margin-top:12px;padding:16px;background:#00000029;border:1px solid #383C46;border-radius:8px}.edit-tier-modal footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;border-top:1.5px solid #383C46}.edit-tier-modal .footer-right{display:flex;gap:8px}.edit-tier-modal .delete-btn{color:#e56969}@media(hover:hover){.edit-tier-modal .delete-btn:hover{background:#e5696914}}@media(max-width:767px){.edit-tier-modal{width:100vw;max-height:100vh;border-radius:0}.edit-tier-modal header{padding:16px 16px 0}.edit-tier-modal .form{padding:16px}.edit-tier-modal .color-grid{grid-template-columns:repeat(2,1fr)}}.color-picker{display:flex;flex-direction:column;gap:12px;-webkit-user-select:none;user-select:none}.hs-square{position:relative;width:100%;height:160px;border-radius:6px;overflow:hidden;cursor:crosshair;touch-action:none;border:1px solid #383C46;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,hsl(var(--hue, 0),100%,50%))}.hs-square:focus-visible{outline:2px solid #3FA367;outline-offset:2px}.hs-cursor{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #00000080,inset 0 0 0 1px #0000004d;transform:translate(-50%,-50%);pointer-events:none}.hue-slider{appearance:none;-webkit-appearance:none;width:100%;height:14px;border-radius:7px;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red);cursor:pointer;outline:none;border:1px solid #383C46}.hue-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #27292F;box-shadow:0 0 0 1px #00000080;cursor:pointer}.hue-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #27292F;box-shadow:0 0 0 1px #00000080;cursor:pointer}.hue-slider:focus-visible{outline:2px solid #3FA367;outline-offset:2px}.hex-row{display:flex;align-items:center;gap:12px}.preview{width:36px;height:36px;border-radius:6px;flex-shrink:0;box-shadow:inset 0 0 0 1px #0000002e,0 0 0 1px #383c46}.hex-input{display:flex;align-items:center;flex:1;height:36px;padding:0 10px;background:transparent;border:1px solid #40444E;border-radius:4px;font-family:Roboto Flex,Roboto Flex Fallback,sans-serif;font-variant-numeric:tabular-nums;font-size:14px;letter-spacing:.04em;color:#f5f6f7;transition:border-color .15s ease}.hex-input .hash{color:#f5f6f77a;margin-right:4px}.hex-input input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:inherit;font:inherit;text-transform:uppercase;padding:0}.hex-input:focus-within{border-color:#3fa367}
