.connection-indicator {
    position: absolute;
    left: 0;
    bottom: 12rem;
    padding: 1rem;
    background-color: #00000044;
    font-size: 1.5rem;
}

.connection-indicator #connection-indicator-connected {
    color: green;
}

.connection-indicator #connection-indicator-disconnected {
    color: red;
}

.connection-indicator #connection-indicator-connecting {
    color: orange;
}

@media (prefers-reduced-motion: no-preference) {
    .connection-indicator #connection-indicator-connecting {
        animation-name: connectingAnimation;
        animation-duration: 1s;
        animation-iteration-count: infinite;
    }
}

@keyframes connectingAnimation {
    0% {
        opacity: 0
    }
    40% {
        opacity: 100% 
    }
    60% {
        opacity: 100%
    }
    100% {
        opacity: 0
    }
}

.tint-image-holder {
    position: relative;
    width: min-content;
}

.tint-image-holder .tint {
    position: absolute;
    inset: 0;
    display: block;
    object-fit: contain;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.tint-image-holder .base {
    display: block;
}


html {
    position: relative;
}

body {
    position: relative;
    margin: 0;
    display: flex;
    flex-direction: column;
}

html, body, main {
    height: 100%;
}

main {
    display: flex;
    flex-direction: column;
}
#game, #pixi {
    width: 100%;
    flex-grow: 1;
    overflow: hidden;
    display: flex;
}
#stats {
    display: flex;
    justify-content: space-between;
    height: 6em;
    padding: 1em;
}
#stats > div, #stats .aviebox, #playerspanel .aviebox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
}

#game {
    /* This magically makes panels work correctly regardless of device size */
    height: 23rem
}

#stats .metas {
    flex-direction: column;
    align-items: end;
}
#stats .tabs {
    display: flex;
    gap: .5em;
}
#stats .tabs button {
    cursor: pointer;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 2em;
    border: none;
    border-radius: 3px;
    background: rgb(60, 60, 60);
    color: white;

    display: flex;
    gap: .2em;
    align-items: center;
}
#stats .tabs button:hover {
    background: rgb(90, 90, 90);
}
#stats .tabs button img {
    width: 1.3em;
    height: 1.3em;
}
#stats #pcount {
    font-size: 1.7em;
}
.aviebox .info {
    display: flex;
    flex-direction: column;
}
.aviebox .health {
    display: flex;
    align-items: center;
    gap: .3em;
}
.fa-heart {
    color: rgb(242, 71, 71);
}
.fa-heart-crack {
    color: rgb(66, 71, 71);
}
.aviebox .units img {
    width: 2em;
    height: 2em;
}
.aviebox .units i {
    font-size: 1.5em;
}
.aviebox .pfp, .aviebox .pfp .itsme {
    height: 6em;
    width: 6em;
    border-radius: 10px;
    /*cursor: grab;*/
}
.aviebox .name {
    font-weight: bold;
    font-size: 2em;
}
.aviebox .units, #tooltip #hoveredunits {
    display: flex;
    gap: .5em;
    align-items: center;
}
.aviebox .units .lettuce, #tooltip .lettuce {
    display: flex;
    gap: .3em;
    align-items: center;
}
.aviebox .units .lettucecount {
    font-size: 1.5em;
}

.pointerphobe {
    pointer-events: none !important;
    /*
        https://github.com/pixijs/pixijs/blob/4cfcbc08446c1cc2480f00124474e892dd6a4e4b/src/dom/DOMPipe.ts#L136

        For DOMContainers PixiJS sets the container to pointer-events: auto by default to override the preference
        of its parent container that sets pointer-events: none. Ref. MDN that the browser is supposed to respect
        (not ignore) that: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/pointer-events

        "If one of the element's children has pointer-events explicitly set to allow that child to be the target
        of pointer events, then any events targeting that child will pass through the parent as the event travels
        along the parent chain, and trigger event listeners on the parent as appropriate."

        I tried adding pointer-events: none; to the #tooltip styling but the aforementioned behavior causes the
        tooltip's DOMContainer to screw things up anyway. This is bad because if you are panning around with the
        cursor then it can get onto the tooltip if you are moving quickly which then *starts capturing hovers
        instead of the canvas!!* Luckily there is a cheap fix above (that requires using !important) that is used
        by the game: [domcontainer].element.classList.add("pointerphobe");

        I did also try tooltip.element.style.pointerEvents = "none"; in case it would override it but as PixiJS
        sets pointerEvents to auto during the "postrender" function this has no effect and I need to do it by
        styling (or do some weird post-post-render stuff but why would I do that, more effort for no gain...)

        Thank you for coming to my NIA Talk. I'm not 100% confident what I said is true but who cares it works
        amirite? Hahahah. Can I make this even longer? I need to hit the end of my line wrap. Word. Word. Word.
        Fun fact: This client is codenamed "Leafy Green". Fun fact two: I need to hit the end of the wrap again.
     */
}
#tooltip {
    padding: .5em;
    white-space: nowrap;
    background: rgb(30,30,30);

    display: flex;
    flex-direction: column;
}
#tooltip #tileinfo {
    display: flex;
    gap: .2em;
}
#tooltip #actions {
    pointer-events: auto;
}
#tooltip #actions {
    display: flex;
    flex-direction: column;
}
#tooltip #actions button {
    border: none;
    background-color: rgb(30,30,30);
    color: white;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    cursor: pointer;
    font-size: 1.2em;
    display: flex;
    justify-content: left;
    gap: .3em;
    padding: .3em;
    border-top: 2px dashed rgb(109, 109, 109);
    align-items: center;
}
#tooltip #actions button:first-child {
    margin-top: .3em;
}

#tooltip .lettuce img {
    width: 1em;
}
#tooltip #tileinfowrap {
    display: flex;
}
#tooltip .pfp:not([src=""]) {
    width: 2.5em;
    height: 2.5em;
    border-radius: 5px;
    margin-left: .5em;
}

#panels > div {
    background-color: rgb(30,30,30);
    width: 25em;
    padding: .5em;
    gap: .5em;
    /*display: flex;*/
    /*flex-direction: column;*/
    overflow-y: auto;
    max-height: 100%;
}
#playerspanel .aviebox {
    justify-content: left;
    border-bottom: 2px dashed rgb(109, 109, 109);
    padding: .5em 0;
}
.hidden {display: none !important;}

@media (max-width: 60em) {
    #game[active-panel] #pixi {
        display: none;
    }
    #game[active-panel] #panels, #panels > div {
        width: calc(100% - .5em);
    }
    #gridbtn {
        display: none !important;
    }
}
@media (max-width: 45em) {
    #stats {
        flex-direction: column;
        gap: 1em;
    }
    #stats > div {
        height: 3em;
    }
    #pcount {
        display: none;
    }
    #stats .metas {
        align-items: center;
    }
    #stats .pfp {
        width: 3em;
        height: 3em;
    }
    #stats .info {
        font-size: smaller;
    }
    #stats .tabs button {
        font-size: 1.4em;
    }
}

#playerspanel .aviebox {
    cursor: pointer;
}
.pfp.stuffed {
    position: relative;
}
.pfp.stuffed .voteicon {
    position: absolute;
    width: 4em;
    height: 4em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#eventspanel details summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    margin-bottom: .5em;
}
#eventspanel details summary span:first-child:before {
    content: "➔ ";
    display: inline-block;
    width: 1em;
}
#eventspanel details[open] summary span:first-child:before {
    content: "🡻 ";
}
.event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    background: rgb(62, 62, 62);
    margin-bottom: .5em;
    text-align: center;
}
.event.slim {
    justify-content: center;
}
.event img {
    height: 4em;
}
.event .left {
    transform: translateX(-1em);
 }
.event .right {
    transform: scaleX(-1) translateX(-1em);
}