/* button up */
.btn {
    position: fixed;
    z-index: 1000;
    right: var(--this-gap);
    bottom: var(--this-gap);
    padding: var(--this-gap);
    background-color: var(--back-clr-one);
}
.btn__container {
    padding: calc(var(--this-gap)/2);
    background-color: rgba(0,0,0,0.25);
    transition: background-color 0.3s;
}
.btn__button {
    position: relative;
    bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--this-gap);
    text-decoration: none;
    font-size: 20px;
    color: var(--main-clr-one);
    transition: color 0.3s;
}
.btn__button:hover {
    color: var(--hover-clr);
}
.btn__container:active {
    background-color: var(--active-clr);
}
/* emblems for short names */
.emblem {
    --this-gap: 20px;
    --this-clr-one: grey;
    --this-clr-two: dimgrey;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--this-gap)*2);
    height: calc(var(--this-gap)*2);
    padding: 10px;
    outline: 3px solid rgba(255,255,255,0.25);
    outline-offset: -3px;
    border-radius: 50%;
    color: silver;
    font-weight: 700;
    background-image: 
        linear-gradient(to top right,
            var(--this-clr-one), var(--this-clr-two)
        )
    ;
    background-repeat: no-repeat;
}
/* races */
.emblem--z {
    --this-clr-one: red;
    --this-clr-two: purple;    
}
.emblem--p {
    --this-clr-one: orange;
    --this-clr-two: brown;
}
.emblem--t {
    --this-clr-one: rgb(30, 112, 193);
    --this-clr-two: rgb(16, 43, 124);
}
/* positions */
.emblem--1,.emblem--2,.emblem--3,.emblem--4,.emblem--5,.emblem--6,
.emblem--7,.emblem--8,.emblem--9,.emblem--10,.emblem--11,.emblem--12 {
    --pos-clr: var(--main-clr-three);
    --pos-clr: darkgrey;
    --gdt-step: 30deg;
    --pdg: calc(100% - 12px);
    background-image: 
        radial-gradient(
            var(--this-clr-two) var(--pdg), transparent var(--pdg), 
            transparent
        )
        ,
        conic-gradient( from var(--srt-stp),
            transparent 0deg, var(--pos-clr) 0deg, var(--pos-clr) 30deg, transparent 30deg
        )
    ;
    background-color: var(--this-clr-two);
}
.emblem--1 { --srt-stp: 15deg;}
.emblem--2 { --srt-stp: 45deg;}
.emblem--3 { --srt-stp: 75deg;}
.emblem--4 { --srt-stp: 105deg;}
.emblem--5 { --srt-stp: 135deg;}
.emblem--6 { --srt-stp: 165deg;}
.emblem--7 { --srt-stp: 195deg;}
.emblem--8 { --srt-stp: 225deg;}
.emblem--9 { --srt-stp: 255deg;}
.emblem--10 { --srt-stp: 285deg;}
.emblem--11 { --srt-stp: 315deg;}
.emblem--12 { --srt-stp: 345deg;}
/* openings */
.emblem--r, .emblem--b, .emblem--f {
    --bdr-wdh: 6px;
    --open-clr: var(--this-clr-two);
    --pdg: calc(var(--this-gap) - var(--bdr-wdh));
    border-style: double;
    border-width: var(--bdr-wdh);
    border-radius: 0px;
    outline: revert;
    border-top: var(--bdr-wdh) solid var(--open-clr);
    border-bottom: var(--bdr-wdh) solid var(--open-clr);
    border-left: var(--bdr-wdh) solid transparent;
    border-right: var(--bdr-wdh) solid transparent;
    padding: calc(var(--this-gap) - var(--bdr-wdh));
    padding-bottom: calc(var(--pdg) + 2px);
    width: 0px;
    height: 0px;
    /* color: var(--open-clr); */
    color: grey;
    line-height: 0px;
    background-image: none;
    background-color: transparent;
}
.emblem--r { --open-clr: rgba(255, 86, 86, 0.626);}
.emblem--b { --open-clr: rgba(34, 124, 209, 0.716);}
.emblem--f { --open-clr: rgba(140, 206, 47, 0.616);}
/* nest */
.nest {
    padding: 9px;
    margin: var(--this-gap) 0px;
    background-color: var(--back-clr-one);
}
/* polygon */
.octagon {
    --x: var(--this-gap);
    clip-path: polygon(
        0px var(--x), var(--x) 0px,
        calc(100% - var(--x)) 0px, 100% var(--x),
        100% calc(100% - var(--x)), calc(100% - var(--x)) 100%,
        var(--x) 100%, 0px calc(100% - var(--x))
    );
    /* box-shadow: inset 10px 10px rgba(0,0,0,0.5); */
}