.hex-board-wrapper{--hex-radius:calc(100cqw/11.5);--hex-width:calc(var(--hex-radius)*1.732);--hex-height:calc(var(--hex-radius)*2);--cell-spacing:calc(var(--hex-radius)*-.2);--cell-width:calc(var(--hex-width) + var(--cell-spacing));--cell-height:calc(var(--hex-height) + var(--cell-spacing));--cell-size:calc(var(--hex-radius)*2.2);--overlap-ratio:.75;--drag-size:calc(var(--hex-radius)*.5);--champ-size:calc(var(--hex-radius)*1.5);--item-size:calc(var(--champ-size)*.32);--star-size:calc(var(--champ-size)*.25);--transform-size:calc(var(--champ-size)*.25);--item-border-width:max(1px,calc(var(--hex-radius)*.04));--transform-border-width:max(1px,calc(var(--hex-radius)*.04));--empty-cell-scale:1.08;--empty-cell-scale-hover:1.12;--stroke-normal:max(2px,calc(var(--hex-radius)*.08));--stroke-hover:max(3px,calc(var(--hex-radius)*.12));--offset-x:calc(var(--cell-size)/2 - var(--hex-radius)*.3);--offset-y:calc(var(--cell-size)/2 - var(--hex-radius)*.3);aspect-ratio:1.95;width:100%;margin:0 auto;position:relative;container-type:inline-size}.hex-cell{width:var(--cell-size);height:var(--cell-size);position:absolute}.hex-cell[data-pos="0,0"]{left:calc(var(--offset-x) - var(--cell-size)/2);top:calc(var(--offset-y) - var(--cell-size)/2)}.hex-cell[data-pos="0,1"]{left:calc(var(--offset-x) + var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) - var(--cell-size)/2)}.hex-cell[data-pos="0,2"]{left:calc(var(--offset-x) + 2*var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) - var(--cell-size)/2)}.hex-cell[data-pos="0,3"]{left:calc(var(--offset-x) + 3*var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) - var(--cell-size)/2)}.hex-cell[data-pos="0,4"]{left:calc(var(--offset-x) + 4*var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) - var(--cell-size)/2)}.hex-cell[data-pos="0,5"]{left:calc(var(--offset-x) + 5*var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) - var(--cell-size)/2)}.hex-cell[data-pos="0,6"]{left:calc(var(--offset-x) + 6*var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) - var(--cell-size)/2)}.hex-cell[data-pos="1,0"]{left:calc(var(--offset-x) + var(--cell-width)/2 - var(--cell-size)/2);top:calc(var(--offset-y) + var(--cell-height)*var(--overlap-ratio) - var(--cell-size)/2)}.hex-cell[data-pos="1,1"]{left:calc(var(--offset-x) + var(--cell-width)/2 + var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) + var(--cell-height)*var(--overlap-ratio) - var(--cell-size)/2)}.hex-cell[data-pos="1,2"]{left:calc(var(--offset-x) + var(--cell-width)/2 + 2*var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) + var(--cell-height)*var(--overlap-ratio) - var(--cell-size)/2)}.hex-cell[data-pos="1,3"]{left:calc(var(--offset-x) + var(--cell-width)/2 + 3*var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) + var(--cell-height)*var(--overlap-ratio) - var(--cell-size)/2)}.hex-cell[data-pos="1,4"]{left:calc(var(--offset-x) + var(--cell-width)/2 + 4*var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) + var(--cell-height)*var(--overlap-ratio) - var(--cell-size)/2)}.hex-cell[data-pos="1,5"]{left:calc(var(--offset-x) + var(--cell-width)/2 + 5*var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) + var(--cell-height)*var(--overlap-ratio) - var(--cell-size)/2)}.hex-cell[data-pos="1,6"]{left:calc(var(--offset-x) + var(--cell-width)/2 + 6*var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) + var(--cell-height)*var(--overlap-ratio) - var(--cell-size)/2)}.hex-cell[data-pos="2,0"]{left:calc(var(--offset-x) - var(--cell-size)/2);top:calc(var(--offset-y) + 2*var(--cell-height)*var(--overlap-ratio) - var(--cell-size)/2)}.hex-cell[data-pos="2,1"]{left:calc(var(--offset-x) + var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) + 2*var(--cell-height)*var(--overlap-ratio) - var(--cell-size)/2)}.hex-cell[data-pos="2,2"]{left:calc(var(--offset-x) + 2*var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) + 2*var(--cell-height)*var(--overlap-ratio) - var(--cell-size)/2)}.hex-cell[data-pos="2,3"]{left:calc(var(--offset-x) + 3*var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) + 2*var(--cell-height)*var(--overlap-ratio) - var(--cell-size)/2)}.hex-cell[data-pos="2,4"]{left:calc(var(--offset-x) + 4*var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) + 2*var(--cell-height)*var(--overlap-ratio) - var(--cell-size)/2)}.hex-cell[data-pos="2,5"]{left:calc(var(--offset-x) + 5*var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) + 2*var(--cell-height)*var(--overlap-ratio) - var(--cell-size)/2)}.hex-cell[data-pos="2,6"]{left:calc(var(--offset-x) + 6*var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) + 2*var(--cell-height)*var(--overlap-ratio) - var(--cell-size)/2)}.hex-cell[data-pos="3,0"]{left:calc(var(--offset-x) + var(--cell-width)/2 - var(--cell-size)/2);top:calc(var(--offset-y) + 3*var(--cell-height)*var(--overlap-ratio) - var(--cell-size)/2)}.hex-cell[data-pos="3,1"]{left:calc(var(--offset-x) + var(--cell-width)/2 + var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) + 3*var(--cell-height)*var(--overlap-ratio) - var(--cell-size)/2)}.hex-cell[data-pos="3,2"]{left:calc(var(--offset-x) + var(--cell-width)/2 + 2*var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) + 3*var(--cell-height)*var(--overlap-ratio) - var(--cell-size)/2)}.hex-cell[data-pos="3,3"]{left:calc(var(--offset-x) + var(--cell-width)/2 + 3*var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) + 3*var(--cell-height)*var(--overlap-ratio) - var(--cell-size)/2)}.hex-cell[data-pos="3,4"]{left:calc(var(--offset-x) + var(--cell-width)/2 + 4*var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) + 3*var(--cell-height)*var(--overlap-ratio) - var(--cell-size)/2)}.hex-cell[data-pos="3,5"]{left:calc(var(--offset-x) + var(--cell-width)/2 + 5*var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) + 3*var(--cell-height)*var(--overlap-ratio) - var(--cell-size)/2)}.hex-cell[data-pos="3,6"]{left:calc(var(--offset-x) + var(--cell-width)/2 + 6*var(--cell-width) - var(--cell-size)/2);top:calc(var(--offset-y) + 3*var(--cell-height)*var(--overlap-ratio) - var(--cell-size)/2)}.hex-board-wrapper--sub{filter:sepia(.4)hue-rotate(-30deg)saturate(1.4)}.hex-board-wrapper img{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-webkit-touch-callout:none}.champion-container{width:var(--drag-size);height:var(--drag-size);z-index:10;filter:drop-shadow(0 4px 4px rgba(37,36,34,.25));-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.champion-border{width:calc(var(--champ-size) + var(--champ-border-width));height:calc(var(--champ-size) + var(--champ-border-width));left:calc((var(--drag-size) - var(--champ-size) - var(--champ-border-width))/2);top:calc((var(--drag-size) - var(--champ-size) - var(--champ-border-width))/2);position:absolute}.champion-image-wrapper{width:var(--champ-size);height:var(--champ-size);left:calc((var(--drag-size) - var(--champ-size))/2);top:calc((var(--drag-size) - var(--champ-size))/2);-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;position:absolute}.champion-image-wrapper img{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.hex-board-display-only .champion-image-wrapper,.hex-board-display-only .champion-image-wrapper img{pointer-events:auto}.champion-name{width:calc(var(--champ-size)*.8);z-index:15;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.champion-name-text{font-size:calc(var(--champ-size)*.12);min-font-size:8px}.champion-items{top:calc((var(--drag-size) + var(--champ-size))/3.6);z-index:20;gap:1%;display:flex;position:absolute;left:50%;transform:translate(-50%)}.champion-items>div{z-index:20;position:relative}.champion-stars{left:50%;top:calc((var(--drag-size) - var(--champ-size))/5 - var(--star-size));align-items:center;display:flex;position:absolute;transform:translate(-50%)}.hex-board-wrapper{--champ-border-width:max(5px,calc(var(--hex-radius)*.2))}.empty-hex-renderer{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.empty-hex-outer{width:calc(var(--champ-size)*var(--empty-cell-scale));height:calc(var(--champ-size)*var(--empty-cell-scale));position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.empty-hex-inner{width:calc(var(--champ-size)*var(--empty-cell-scale) - var(--stroke-normal)*2);height:calc(var(--champ-size)*var(--empty-cell-scale) - var(--stroke-normal)*2);z-index:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.empty-hex-renderer--drop-target .empty-hex-outer{width:calc(var(--champ-size)*var(--empty-cell-scale-hover));height:calc(var(--champ-size)*var(--empty-cell-scale-hover))}.empty-hex-renderer--drop-target .empty-hex-inner{width:calc(var(--champ-size)*var(--empty-cell-scale-hover) - var(--stroke-hover)*2);height:calc(var(--champ-size)*var(--empty-cell-scale-hover) - var(--stroke-hover)*2)}.transform-indicator{right:calc((var(--drag-size) - var(--champ-size))/5 - var(--transform-size)/1.1);width:var(--transform-size);height:var(--transform-size);z-index:25;border-radius:50%;align-items:center;display:flex;position:absolute;top:10%;transform:translateY(-50%)}.transform-indicator-icon{border-radius:50%}