@keyframes avatar_bounce {
    0%,100% {
        top: 0
    }

    15% {
        top: 6%
    }
}

@keyframes avatar_clicked {
    0%,100% {
        transform: scale(1)
    }

    15% {
        transform: scale(1.2)
    }
}

@keyframes filter_hue_rotate {
    0% {
        filter: hue-rotate(0)
    }

    100% {
        filter: hue-rotate(360deg)
    }
}

@keyframes filter_blink {
    0%,100% {
        filter: brightness(1)
    }

    50% {
        filter: brightness(.6)
    }
}

@keyframes filter_alien {
    0% {
        transform: rotate(0) translate(3px,0) rotate(0)
    }

    100% {
        transform: rotate(-360deg) translate(3px,0) rotate(360deg)
    }
}

@keyframes filter_glow {
    0%,100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.2)
    }
}

@keyframes background_ray {
    0% {
        opacity: 0
    }
}

.background-stars {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(/drawapi/img/stars.png);
    background-repeat: repeat
}

.background-wave {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(/drawapi/img/wave.gif);
    background-size: contain;
    background-repeat: repeat-x;
    opacity: .5
}

@keyframes background_wave1 {
    0% {
        background-position-x: 0
    }

    100% {
        background-position-x: 100%
    }
}

@keyframes background_wave2 {
    0% {
        background-position-x: 0
    }

    100% {
        background-position-x: -100%
    }
}

.background-wave:nth-child(1) {
    animation: background_wave1 12s linear 0s infinite
}

.background-wave:nth-child(2) {
    animation: background_wave1 16s linear -5s infinite;
    bottom: -10%
}

.background-wave:nth-child(3) {
    animation: background_wave2 20s linear -11s infinite;
    bottom: -15%
}

.background-bubble {
    --FX_BUBBLE_TRAVEL: calc(var(--UNIT) * -1.2);
    --FX_BUBBLE_SCALE: 1;
    position: absolute;
    width: calc(var(--UNIT)/ 3);
    height: calc(var(--UNIT)/ 3);
    background: url(/drawapi/img/bubble.gif);
    background-size: contain;
    opacity: .5
}

@keyframes background_bubble {
    0% {
        transform: scale(0) translate(0,0)
    }

    10% {
        transform: scale(calc(var(--FX_BUBBLE_SCALE) + .3))
    }

    15% {
        transform: scale(var(--FX_BUBBLE_SCALE))
    }

    100% {
        transform: scale(calc(var(--FX_BUBBLE_SCALE) - .2)) translate(0,var(--FX_BUBBLE_TRAVEL))
    }
}

.background-bubble:nth-child(1) {
    --FX_BUBBLE_SCALE: 0.8;
    left: 20%;
    top: 60%;
    animation: background_bubble 4s ease-in-out 0s infinite
}

.background-bubble:nth-child(2) {
    --FX_BUBBLE_SCALE: 1.1;
    left: 70%;
    top: 30%;
    animation: background_bubble 7s ease-in-out 0s infinite
}

.background-bubble:nth-child(3) {
    --FX_BUBBLE_SCALE: 0.9;
    left: 50%;
    top: 110%;
    animation: background_bubble 5s ease-in-out 0s infinite
}

.background-bubble:nth-child(4) {
    --FX_BUBBLE_SCALE: 1.15;
    left: 10%;
    top: 80%;
    animation: background_bubble 6s ease-in-out 0s infinite
}

.background-bubble:nth-child(5) {
    --FX_BUBBLE_SCALE: 0.85;
    left: 35%;
    top: 50%;
    animation: background_bubble 8s ease-in-out 0s infinite
}

.background-bubble:nth-child(6) {
    left: 60%;
    top: 64%;
    animation: background_bubble 4.5s ease-in-out 0s infinite
}

.background-bubble:nth-child(7) {
    left: 90%;
    top: 80%;
    animation: background_bubble 3.3s ease-in-out -6s infinite
}

.avatar {
    pointer-events: none;
    user-select: none;
    position: relative;
    flex: 0 0 auto;
    height: 100%;
    width: 100%;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: pixelated
}

.avatar.fit {
    width: 100%;
    height: 100%
}

.avatar.clicked {
    animation: avatar_clicked 125ms ease-in-out 1
}

.avatar.filter-hue-rotate .color {
    animation: filter_hue_rotate 2s linear 0s infinite
}

.avatar.filter-alien .color::after {
    content: ' ';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-size: inherit;
    background-position: 0 0;
    filter: opacity(.35) saturate(10) brightness(10) hue-rotate(0);
    animation: filter_alien 2s linear 0s infinite
}

.avatar.filter-alien .color::before {
    content: ' ';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-size: inherit;
    background-position: 0 0;
    filter: opacity(.35) saturate(10) brightness(10) hue-rotate(250deg);
    animation: filter_alien 2s linear -1s infinite
}

.avatar.filter-blink .color {
    animation: filter_blink 2s ease-in-out 0s infinite
}

.avatar.filter-glow .color::after {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    filter: opacity(.8) saturate(8) blur(6px)
}

.avatar .eyes.bounce,.avatar .mouth.bounce {
    animation: avatar_bounce 125ms ease-in-out 1
}

.avatar .color {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(/drawapi/img/avatar/color_atlas.gif);
    background-size: 1000% 1000%
}

.avatar .eyes {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(/drawapi/img/avatar/eyes_atlas.gif);
    background-size: 1000% 1000%
}

.avatar .mouth {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(/drawapi/img/avatar/mouth_atlas.gif);
    background-size: 1000% 1000%
}

.avatar .special {
    position: absolute;
    left: -33%;
    top: -33%;
    width: 166%;
    height: 166%;
    background-image: url(/drawapi/img/avatar/special_atlas.gif);
    background-size: 1000% 1000%
}

.avatar .owner {
    position: absolute;
    width: 50%;
    height: 50%;
    left: -5%;
    top: -22%;
    z-index: 2;
    background-image: url(/drawapi/img/crown.gif);
    background-position: center;
    background-size: contain
}

:root {
    --vh: 100vh;
    --FONT_SIZE: 14px;
    --BORDER_GAP: 6px;
    --BORDER_RADIUS: 3px;
    --UNIT: 48px;
    --DROPSHADOW: drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.25));
    --PLAYERS_PER_PAGE: -1;
    --COLOR_TEXT_CANVAS_TRANSPARENT: #404040;
    --COLOR_PANEL_BG: rgba(12, 44, 150, 0.75);
    --COLOR_PANEL_LO: rgba(7, 36, 131, 0.75);
    --COLOR_PANEL_HI: #1640c9;
    --COLOR_PANEL_FOCUS: #ee9631;
    --COLOR_PANEL_BORDER: #040a33;
    --COLOR_PANEL_BORDER_FOCUS: #56b2fd;
    --COLOR_PANEL_TEXT: #f0f0f0;
    --COLOR_PANEL_TEXT_FOCUS: white;
    --COLOR_PANEL_TEXT_PLACEHOLDER: #9b9b9b;
    --COLOR_PANEL_BUTTON: #2a51d1;
    --COLOR_PANEL_BUTTON_HOVER: #1e44be;
    --COLOR_PANEL_BUTTON_ACTIVE: #1d40b4;
    --COLOR_TOOL_BASE: white;
    --COLOR_TOOL_HOVER: #c5c5c5;
    --COLOR_TOOL_ACTIVE: #ab66eb;
    --COLOR_TOOL_TEXT: #000;
    --COLOR_TOOL_SIZE_BASE: white;
    --COLOR_TOOL_SIZE_HOVER: #c5c5c5;
    --COLOR_TOOL_SIZE_ACTIVE: #ab66eb;
    --COLOR_INPUT_BG: #ffffff;
    --COLOR_INPUT_HOVER: white;
    --COLOR_INPUT_TEXT: #2c2c2c;
    --COLOR_INPUT_BORDER: #707070;
    --COLOR_INPUT_BORDER_FOCUS: #56b2fd;
    --COLOR_TOOL_TIP_BG: #4571ff;
    --COLOR_GAMEBAR_TEXT: #000;
    --COLOR_GAMEBAR_ROUND_TEXT: #000;
    --COLOR_GAMEBAR_WORD_DESCRIPTION: #363636;
    --COLOR_CHAT_TEXT_BASE: #000;
    --COLOR_CHAT_TEXT_GUESSED: #56CE27;
    --COLOR_CHAT_TEXT_CLOSE: #e2cb00;
    --COLOR_CHAT_TEXT_DRAWING: #3975CE;
    --COLOR_CHAT_TEXT_JOIN: #56CE27;
    --COLOR_CHAT_TEXT_LEAVE: #CE4F0A;
    --COLOR_CHAT_TEXT_OWNER: #ffa844;
    --COLOR_CHAT_TEXT_GUESSCHAT: #7dad3f;
    --COLOR_CHAT_BG_BASE: #fff;
    --COLOR_CHAT_BG_ALT: #ececec;
    --COLOR_CHAT_SCROLLBAR: #7e7e7e;
    --COLOR_CHAT_SCROLLBAR_THUMB: #c7c7c7;
    --COLOR_CHAT_BG_GUESSED_BASE: #e7ffdf;
    --COLOR_CHAT_BG_GUESSED_ALT: #cfffbd;
    --COLOR_CHAT_INPUT_COUNT: #000;
    --COLOR_PLAYER_TEXT_BASE: #000;
    --COLOR_PLAYER_ME: #4998ff;
    --COLOR_PLAYER_ME_GUESSED: #0048b5;
    --COLOR_PLAYER_BG_BASE: #fff;
    --COLOR_PLAYER_BG_ALT: #ececec;
    --COLOR_PLAYER_BG_GUESSED_BASE: #5bdd4a;
    --COLOR_PLAYER_BG_GUESSED_ALT: #48c737
}

html {
    box-sizing: border-box
}

*,:after,:before {
    padding: 0;
    margin: 0;
    box-sizing: inherit
}

body {
    font-family: Nunito,sans-serif;
    padding: 0!important;
    margin: 0!important;
    background-color: #124da5;
    background-image: url(/drawapi/img/background.png);
    background-repeat: repeat;
    background-size: 350px;
    height: 100%;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated
}

a {
    color: #b4baff
}

button {
    font: inherit;
    font-size: inherit;
    color: inherit;
    padding: 0;
    margin: 0;
    cursor: pointer;
    border: 0;
    font-weight: 800;
    color: var(--COLOR_PANEL_TEXT);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-decoration: none
}

button:disabled {
    cursor: not-allowed;
    opacity: .7
}

input::placeholder {
    color: var(--COLOR_PANEL_TEXT_PLACEHOLDER)
}

input,select,textarea {
    font: inherit;
    flex: 0 0 auto;
    height: 32px;
    width: 100%;
    color: var(--COLOR_INPUT_TEXT);
    background-color: var(--COLOR_INPUT_BG);
    border: 1px solid var(--COLOR_INPUT_BORDER);
    border-radius: var(--BORDER_RADIUS);
    padding: .2em .5em;
    transition: background-color .12s ease,border-color .12s ease
}

input:focus,select:focus,textarea:focus {
    outline: 0;
    background-color: var(--COLOR_INPUT_HOVER);
    border-color: var(--COLOR_INPUT_BORDER_FOCUS);
    box-shadow: 0 0 10px -4px var(--COLOR_INPUT_BORDER_FOCUS)
}

input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled) {
    background-color: var(--COLOR_INPUT_HOVER)
}

input:disabled,select:disabled,textarea:disabled {
    cursor: not-allowed;
    opacity: .7
}

input:invalid,select:invalid,textarea:invalid {
    border-color: red
}

input[type=range]:focus {
    box-shadow: none
}

input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0;
    padding: 0;
    width: 1.15em;
    height: 1.15em;
    transition: none;
    display: grid;
    place-content: center
}

input[type=checkbox]::before {
    content: "";
    width: 0;
    height: 0;
    border-radius: var(--BORDER_RADIUS);
    transition: width 50ms ease-in-out,height 50ms ease-in-out;
    box-shadow: inset 1em 1em var(--COLOR_INPUT_TEXT)
}

input[type=checkbox]:checked::before {
    width: 1em;
    height: 1em
}

.crisp {
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated
}

.shadow {
    box-shadow: 0 0 2px 2px rgba(0,0,0,.2)
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    pointer-events: none
}

.dots {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center
}

.dots .dot {
    cursor: pointer;
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    opacity: .3;
    transition: opacity .1s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center
}

.dots .dot.active,.dots .dot:hover {
    opacity: 1
}

.dots .dot .inner {
    width: 44%;
    height: 44%;
    background-color: #fff;
    border-radius: 999px;
    box-shadow: 0 0 3px rgba(0,0,0,.6)
}

.dots .dot.active .inner {
    width: 57%;
    height: 57%
}

@keyframes tooltip_introduce {
    0% {
        opacity: 0;
        transform: scale(0)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

.tooltip {
    pointer-events: none;
    position: absolute;
    z-index: 10000;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .15));
    animation: tooltip_introduce .2s ease-in-out
}

.tooltip.N .tooltip-content {
    transform: translate(-50%,calc(-100% - 10px - 4px))
}

.tooltip.N .tooltip-arrow {
    top: -14px;
    left: calc(50% - 10px);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--COLOR_TOOL_TIP_BG)
}

.tooltip.S .tooltip-content {
    transform: translate(-50%,14px)
}

.tooltip.S .tooltip-arrow {
    left: calc(50% - 10px);
    top: 4px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--COLOR_TOOL_TIP_BG)
}

.tooltip.E .tooltip-content {
    transform: translate(14px,-50%)
}

.tooltip.E .tooltip-arrow {
    top: calc(50% - 10px);
    left: 4px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid var(--COLOR_TOOL_TIP_BG)
}

.tooltip.W .tooltip-content {
    transform: translate(calc(-100% - 10px - 4px),-50%)
}

.tooltip.W .tooltip-arrow {
    top: calc(50% - 10px);
    left: -14px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid var(--COLOR_TOOL_TIP_BG)
}

.tooltip .tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0
}

.tooltip .tooltip-content {
    position: absolute;
    color: var(--COLOR_PANEL_TEXT);
    border-radius: var(--BORDER_RADIUS);
    padding: 7px;
    background-color: var(--COLOR_TOOL_TIP_BG);
    text-shadow: 1px 1px 0 #00000038;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    white-space: pre
}

@keyframes setting_icon_introduce {
    0% {
        opacity: 0;
        transform: scale(0) translateY(-30px)
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}

@keyframes setting_content {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

#game-settings {
    z-index: 20;
    position: absolute;
    width: var(--UNIT);
    height: var(--UNIT);
    right: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

#game-settings .icon {
    position: relative;
    cursor: pointer;
    width: 87.5%;
    height: 87.5%;
    background-image: url(/drawapi/img/settings.gif);
    background-size: contain;
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .3));
    transition: transform .1s ease-in-out
}

#game-settings .icon:hover {
    transform: scale(1.1)
}

#game-settings.open .content {
    display: block
}

#game-settings .content {
    display: none;
    position: relative;
    border-radius: var(--BORDER_RADIUS);
    margin: -4px;
    margin-top: 4px;
    padding: 4px;
    animation: setting_content .15s ease-in-out 0s 1 normal both
}

#audio {
    cursor: pointer;
    width: 48px;
    height: 48px;
    animation: setting_icon_introduce .15s ease-in-out;
    animation-fill-mode: both;
    animation-delay: 0s
}

#audio .icon {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-image: url(/drawapi/img/audio.gif);
    transition: transform 70ms ease;
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .3))
}

#audio.off .icon {
    background-image: url(/drawapi/img/audio_off.gif)
}

#audio:hover .icon {
    transform: scale(1.2)
}

#lightbulb {
    cursor: pointer;
    width: 48px;
    height: 48px;
    animation: setting_icon_introduce .15s ease-in-out;
    animation-fill-mode: both;
    animation-delay: 35ms
}

#lightbulb .icon {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-image: url(/drawapi/img/bulb.gif);
    transition: transform 70ms ease;
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .3))
}

#lightbulb.off .icon {
    background-image: url(/drawapi/img/bulb_off.gif)
}

#lightbulb:hover .icon {
    transform: scale(1.2)
}

#hotkeys {
    cursor: pointer;
    width: 48px;
    height: 48px;
    animation: setting_icon_introduce .15s ease-in-out;
    animation-fill-mode: both;
    animation-delay: 70ms
}

#hotkeys .icon {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-image: url(/drawapi/img/key.gif);
    transition: transform 70ms ease;
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .3))
}

#hotkeys.off .icon {
    background-image: url(/drawapi/img/key.gif)
}

#hotkeys:hover .icon {
    transform: scale(1.2)
}

#load {
    display: none;
    position: fixed;
    z-index: 9998;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    animation: loadopacity .3s ease-in-out;
    background-color: rgba(0,0,0,.75);
    backdrop-filter: blur(6px)
}

@keyframes loadopacity {
    0% {
        opacity: 0;
        backdrop-filter: blur(0)
    }

    100% {
        opacity: 100%;
        backdrop-filter: blur(6px)
    }
}

@keyframes loadpos {
    0% {
        opacity: 0;
        top: 35%
    }

    100% {
        opacity: 100%;
        top: 50%
    }
}

#load .container {
    position: absolute;
    left: 50%;
    top: 50%;
    animation: loadpos .3s ease-in-out
}

@keyframes loadrot {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

#load .container .icon {
    position: absolute;
    width: 128px;
    height: 128px
}

#load .container .icon .graphic {
    position: absolute;
    left: -50%;
    top: -50%;
    width: 100%;
    height: 100%;
    background-image: url(/drawapi/img/load.gif);
    background-size: contain;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, .5));
    animation: loadrot .8s ease-in-out 0s infinite
}

@supports (backdrop-filter: blur()) {
    #load {
        background-color:rgba(255,255,255,.2)
    }
}

html[data-theme=dark] {
    --COLOR_PANEL_BG: rgba(8, 36, 129, 0.75);
    --COLOR_PANEL_LO: rgba(7, 36, 131, 0.75);
    --COLOR_PANEL_HI: #1640c9;
    --COLOR_PANEL_FOCUS: #ee9631;
    --COLOR_PANEL_BORDER: #040a33;
    --COLOR_PANEL_BORDER_FOCUS: #56b2fd;
    --COLOR_PANEL_TEXT: #f0f0f0;
    --COLOR_PANEL_TEXT_FOCUS: white;
    --COLOR_PANEL_TEXT_PLACEHOLDER: #aaaaaa;
    --COLOR_INPUT_BG: #0b2a61;
    --COLOR_INPUT_HOVER: #0b2a61;
    --COLOR_INPUT_TEXT: white;
    --COLOR_INPUT_BORDER: #214688;
    --COLOR_INPUT_BORDER_FOCUS: #56b2fd;
    --COLOR_TOOL_BASE: #3e50b6;
    --COLOR_TOOL_HOVER: #2f3f9b;
    --COLOR_TOOL_TEXT: white;
    --COLOR_TOOL_SIZE_BASE: gray;
    --COLOR_TOOL_SIZE_HOVER: darkgray;
    --COLOR_TOOL_SIZE_ACTIVE: gray;
    --COLOR_GAMEBAR_TEXT: white;
    --COLOR_GAMEBAR_ROUND_TEXT: white;
    --COLOR_GAMEBAR_WORD_DESCRIPTION: #c2c2c2;
    --COLOR_CHAT_TEXT_BASE: #fff;
    --COLOR_CHAT_BG_BASE: rgba(7, 36, 131, 0.75);
    --COLOR_CHAT_BG_ALT: rgba(7, 36, 131, 0.75);
    --COLOR_CHAT_BG_GUESSED_BASE: #026130;
    --COLOR_CHAT_BG_GUESSED_ALT: #004622;
    --COLOR_CHAT_INPUT_COUNT: white;
    --COLOR_PLAYER_TEXT_BASE: #fff;
    --COLOR_PLAYER_BG_BASE: rgba(7, 36, 131, 0.75);
    --COLOR_PLAYER_BG_ALT: rgba(7, 36, 131, 0.75);
    --COLOR_PLAYER_BG_GUESSED_BASE: rgba(2, 97, 48, 0.75);
    --COLOR_PLAYER_BG_GUESSED_ALT: rgba(2, 97, 48, 0.75)
}

html[data-theme=dark] body {
    background-image: url(/drawapi/img/background_dark.png)
}

html[data-theme=dark] #game-players .player .icons .icon {
    filter: invert(1)
}

html[data-theme=dark] #game-canvas,html[data-theme=dark] #game-toolbar .color-picker {
    filter: brightness(.75)
}

body.snow::before {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    pointer-events: none;
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(transparent 0,transparent 70%,rgba(89,194,255,.36) 100%)
}

canvas.snow {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
    opacity: .9;
    filter: drop-shadow(0 0 4px #000)
}

body .snow {
    background-image: url(/drawapi/img/snow.gif);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
    background-size: cover;
    mix-blend-mode: plus-lighter;
    opacity: .8;
    filter: drop-shadow(0 0 4px #000)
}

.ad-1 {
    width: 728px;
    height: 90px
}

.ad-2 {
    width: 300px;
    height: 250px
}

#game {
    display: none;
    flex-direction: column;
    align-items: center;
    margin-left: 8px;
    margin-right: 8px
}

#game-logo {
    grid-area: logo;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 90px
}

#game-logo a img {
    width: 320px;
    height: auto;
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .25))
}

#game-wrapper {
    height: 100%;
    font-size: var(--FONT_SIZE);
    display: grid;
    grid-gap: var(--BORDER_GAP);
    gap: var(--BORDER_GAP);
    grid-template-areas: "logo    logo   logo" "bar     bar    bar" "players canvas chat" "footer  tools  .";
    grid-template-columns: min-content auto auto;
    grid-template-rows: min-content var(--UNIT) min-content min-content
}

#game-wrapper.toolbar-hidden #game-toolbar {
    visibility: hidden
}

#game-wrapper.room #game-invite {
    display: unset
}

#game-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative
}

#game-info {
    cursor: pointer;
    position: absolute;
    display: flex;
    align-items: center;
    background-image: url(/drawapi/img/info.gif);
    right: 8px;
    top: 8px;
    width: 32px;
    height: 32px;
    color: #b4b4b4;
    font-size: 30px;
    opacity: .7
}

#game-info:hover {
    opacity: 1
}

#game-players-footer {
    grid-area: footer;
    height: var(--UNIT);
    display: flex;
    align-items: center
}

#game-players-footer .dots {
    height: 60%
}

#game-players {
    grid-area: players;
    position: relative;
    flex: 0 0 auto;
    width: 200px;
    border-radius: var(--BORDER_RADIUS);
    display: flex;
    flex-direction: column
}

#game-players .players-list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: 32px
}

#game-players .player-amount {
    display: none;
    position: absolute;
    font-size: 1rem;
    font-weight: 700;
    bottom: 100%;
    left: 0;
    text-shadow: 0 0 3px rgba(0,0,0,.6);
    color: #fff;
    width: 100%;
    text-align: center
}

#game-players .player-amount p {
    font-size: .8rem;
    margin: 0;
    margin-bottom: -6px
}

#game-players .player-amount b:nth-child(4),#game-players .player-amount span {
    font-size: .8rem;
    color: #ddd
}

#game-players .player-amount span {
    margin: 0 2px 0 2px
}

#game-players .player-background {
    --BG: var(--COLOR_PLAYER_BG_BASE);
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--BG)
}

#game-players .player {
    flex: 0 0 auto;
    cursor: pointer;
    position: relative;
    width: 100%;
    height: var(--UNIT);
    color: var(--COLOR_PLAYER_TEXT_BASE)
}

#game-players .player:hover .avatar {
    transform: scale(1.1)
}

#game-players .player.guessed .player-name.me {
    color: var(--COLOR_PLAYER_ME_GUESSED)
}

#game-players .player.first .player-background {
    border-radius: var(--BORDER_RADIUS) var(--BORDER_RADIUS) 0 0
}

#game-players .player.last .player-background {
    border-radius: 0 0 var(--BORDER_RADIUS) var(--BORDER_RADIUS)
}

#game-players .player.odd .player-background {
    --BG: var(--COLOR_PLAYER_BG_ALT)
}

#game-players .player.guessed .player-background {
    --BG: var(--COLOR_PLAYER_BG_GUESSED_BASE)
}

#game-players .player.guessed.odd .player-background {
    --BG: var(--COLOR_PLAYER_BG_GUESSED_ALT)
}

#game-players .player.admin {
    color: #d30707
}

#game-players .player .player-bubble {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    pointer-events: none;
    z-index: 2;
    position: absolute;
    display: flex;
    align-items: center;
    left: 100%;
    top: 6%;
    bottom: 6%;
    animation: bubble_fadeout 1.5s ease-out 0s 1;
    animation-fill-mode: forwards;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .3))
}

@keyframes bubble_fadeout {
    0%,75% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

#game-players .player .player-bubble .arrow {
    height: 40%;
    width: auto;
    aspect-ratio: .5;
    background-color: #e4e4e4;
    clip-path: polygon(0 50%,100% 0,100% 100%)
}

#game-players .player .player-bubble .content {
    max-width: 20ch;
    height: 100%;
    padding-left: .8ch;
    padding-right: .8ch;
    border-radius: var(--BORDER_RADIUS);
    color: #000;
    background-color: #e4e4e4;
    display: flex;
    flex-direction: column;
    justify-content: center
}

#game-players .player .player-bubble .content .text {
    flex: 0 0 auto;
    font-size: 1em;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#game-players .player .player-bubble .content .icon {
    width: auto;
    height: 90%;
    aspect-ratio: 1;
    background-size: cover
}

#game-players .player .player-icons {
    position: absolute;
    bottom: 0;
    left: 4px;
    display: flex
}

@keyframes icon_introduce {
    0% {
        transform: translateY(-8px);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: .7
    }
}

#game-players .player .player-icons .icon {
    display: none;
    flex: 0 0 auto;
    opacity: .7;
    width: 24px;
    height: 24px;
    margin-right: 4px;
    background-size: cover;
    animation: icon_introduce .21s ease-in-out
}

#game-players .player .player-icons .icon.owner {
    background-image: url(/drawapi/img/owner.gif)
}

#game-players .player .player-icons .icon.muted {
    background-image: url(/drawapi/img/mute.gif)
}

#game-players .player .player-icons .icon.visible {
    display: block
}

#game-players .player .player-avatar-container {
    position: absolute;
    right: 0;
    top: -1px;
    width: var(--UNIT);
    height: var(--UNIT)
}

#game-players .player .avatar {
    transition: transform .1s ease-in-out
}

#game-players .player .avatar .drawing {
    image-rendering: crisp-edges;
    display: none;
    position: absolute;
    width: 42px;
    height: 42px;
    right: 30px;
    top: 3px;
    z-index: 2;
    background-image: url(/drawapi/img/pen.gif);
    background-size: contain;
    animation: icon_drawing 1s ease infinite;
    -webkit-animation: icon_drawing 1s ease infinite
}

@keyframes icon_drawing {
    0%,100% {
        transform: rotate(-5deg)
    }

    50% {
        transform: rotate(5deg)
    }
}

#game-players .player .player-info {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}

#game-players .player .player-name {
    width: 100%;
    font-size: 1em;
    line-height: 1em;
    font-weight: 700
}

#game-players .player .player-name.me {
    font-weight: bolder;
    color: var(--COLOR_PLAYER_ME)
}

#game-players .player .player-score {
    width: 100%;
    font-size: .9em;
    line-height: 1em
}

#game-players .player .player-tag {
    width: 100%;
    font-size: .9em;
    line-height: 1em;
    font-weight: 700
}

#game-players .player .player-rank {
    position: absolute;
    font-weight: 700;
    font-size: 1.1em;
    top: 5px;
    left: 6px
}

#game-invite {
    grid-area: tools;
    display: none;
    width: 100%;
    height: 35px;
    order: 1
}

#game-invite input {
    height: 100%;
    border-radius: var(--BORDER_RADIUS) 0 0 var(--BORDER_RADIUS);
    text-align: center
}

#game-invite button {
    background-color: #2c8de7;
    text-shadow: 2px 2px 0 #0000002b;
    transition: background-color 80ms;
    height: 100%;
    border-radius: var(--BORDER_RADIUS);
    flex: 0 0 15%;
    border-radius: 0 var(--BORDER_RADIUS) var(--BORDER_RADIUS) 0
}

#game-invite button:hover:not(:disabled) {
    background-color: #1671c5
}

#game-invite button:active:not(:disabled) {
    background-color: #1361a9;
    padding-top: 2px
}

#game-invite .title {
    width: 100%;
    color: #fff;
    text-align: center;
    font-size: 2em;
    font-weight: 700
}

#game-invite .link {
    flex: 1 1 0;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: row
}

#game-invite .link .input-container {
    flex: 1 1 0;
    position: relative;
    height: 100%;
    font-size: 1.3em
}

#game-invite .link .input-container .link-overlay {
    pointer-events: none;
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    font-weight: 700;
    border-radius: var(--BORDER_RADIUS) 0 0 var(--BORDER_RADIUS);
    opacity: 1;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center
}

#game-invite .link .input-container .link-overlay span {
    text-align: center;
    color: #2c8de7
}

#game-invite .link .input-container:hover .link-overlay {
    opacity: 0
}

#game-canvas .room {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    display: none;
    flex-direction: column;
    color: var(--COLOR_PANEL_TEXT);
    position: relative;
    height: 100%;
    width: 100%;
    padding: var(--BORDER_GAP);
    gap: var(--BORDER_GAP)
}

#game-canvas .room.show {
    display: flex
}

#game-canvas .room input,#game-canvas .room select {
    height: 100%;
    font-size: 1em
}

#game-canvas .room textarea {
    flex: 1 1 auto;
    font-size: 1.1em;
    width: 100%;
    resize: none;
    border-radius: var(--BORDER_RADIUS)
}

#game-canvas .room button {
    font-size: 1.8em
}

#game-canvas .room .game-room-name {
    flex: 0 1 auto;
    position: relative;
    font-weight: bolder;
    font-size: 1.2em
}

#game-canvas .room .game-room-description {
    flex: 0 1 auto;
    font-size: .8em;
    font-style: italic;
    color: #d3d3d3
}

#game-canvas .room .game-room-checkbox {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-end
}

#game-canvas .room .game-room-checkbox label {
    font-size: .8em;
    padding-right: var(--BORDER_GAP)
}

#game-canvas .room .game-room-checkbox input[type=checkbox] {
    aspect-ratio: 1;
    width: auto;
    height: 100%
}

#game-canvas .room .group-buttons {
    display: flex;
    flex: 0 0 auto;
    gap: var(--BORDER_GAP)
}

#game-canvas .room .group-customwords {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--BORDER_GAP);
    min-height: 35%
}

#game-canvas .room .group-settings {
    flex: 0 1 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BORDER_GAP);
    overflow-y: auto
}

#game-canvas .room .group-settings .key {
    display: flex;
    align-items: center
}

#game-canvas .room .group-settings .key img {
    height: 2.3em;
    width: 2.3em;
    vertical-align: middle;
    filter: var(--DROPSHADOW)
}

#game-canvas .room .group-settings .key span {
    margin-left: var(--BORDER_GAP);
    flex: 0 0 auto
}

#button-start-game {
    background-color: #53e237;
    text-shadow: 2px 2px 0 #0000002b;
    transition: background-color 80ms;
    height: 2em;
    border-radius: var(--BORDER_RADIUS);
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
    width: 70%
}

#button-start-game:hover:not(:disabled) {
    background-color: #38c41c
}

#button-start-game:active:not(:disabled) {
    background-color: #30aa19;
    padding-top: 2px
}

#button-invite {
    background-color: #2c8de7;
    text-shadow: 2px 2px 0 #0000002b;
    transition: background-color 80ms;
    height: 2em;
    border-radius: var(--BORDER_RADIUS);
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    width: 30%
}

#button-invite:hover:not(:disabled) {
    background-color: #1671c5
}

#button-invite:active:not(:disabled) {
    background-color: #1361a9;
    padding-top: 2px
}

#button-invite img {
    padding-right: .25em;
    height: 1.2em;
    filter: var(--DROPSHADOW)
}

#game-chat-input-mobile {
    display: none
}

#game-chat {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    grid-area: chat;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    font-size: 1em;
    width: 300px;
    box-sizing: border-box;
    padding-bottom: .2em;
    background-color: var(--COLOR_CHAT_BG_BASE);
    border-radius: var(--BORDER_RADIUS)
}

#game-chat .chat-content {
    flex: 1 1 auto;
    height: 32px;
    padding-top: .2em;
    word-wrap: break-word;
    overflow-y: auto;
    color: var(--COLOR_CHAT_TEXT_BASE)
}

@keyframes chat_msg {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

#game-chat .chat-content p {
    padding: .2em;
    margin: 0;
    opacity: 1;
    animation: chat_msg .1s ease-in-out 1
}

#game-chat .chat-content p:nth-child(even) {
    background-color: var(--COLOR_CHAT_BG_ALT)
}

#game-chat .chat-content p.guessed {
    background-color: var(--COLOR_CHAT_BG_GUESSED_BASE)
}

#game-chat .chat-content p.guessed:nth-child(even) {
    background-color: var(--COLOR_CHAT_BG_GUESSED_ALT)
}

form.chat-form {
    position: relative;
    font: inherit;
    margin: 0;
    padding: 0 .2em 0 .2em
}

form.chat-form .characters {
    font-weight: 700;
    position: absolute;
    right: 1em;
    font-size: .9em;
    color: var(--COLOR_CHAT_INPUT_COUNT);
    top: 1em;
    opacity: 0;
    transition: top 70ms ease-in-out,opacity 70ms ease-in-out
}

form.chat-form .characters.visible {
    top: .5em;
    opacity: 1
}

form.chat-form input {
    font: inherit;
    flex: 0 0 auto;
    height: 2.2em;
    width: 100%;
    padding: .2em;
    padding-right: 2em
}

#game-rate {
    position: absolute;
    top: 4px;
    right: 100px
}

@keyframes rate_introduce {
    0%,80% {
        opacity: 0;
        top: -16px
    }

    100% {
        opacity: .6;
        top: 0
    }
}

#game-rate .like {
    background-image: url(/drawapi/img/thumbsup.gif)
}

#game-rate .dislike {
    background-image: url(/drawapi/img/thumbsdown.gif);
    left: 48px;
    animation-delay: .25s
}

#game-rate .dislike,#game-rate .like {
    cursor: pointer;
    background-size: contain;
    z-index: 999;
    position: absolute;
    width: 48px;
    height: 48px;
    opacity: .6;
    transition: transform 125ms ease,opacity 125ms ease;
    animation: rate_introduce 2s ease-in-out
}

#game-rate .dislike:hover,#game-rate .like:hover {
    opacity: 1;
    transform: scale(1.1)
}

@keyframes canvas_bubble {
    0% {
        transform: translate(100%,0);
        opacity: 0
    }

    5% {
        transform: translate(-5%,0);
        opacity: 1
    }

    8% {
        transform: translate(0,0);
        opacity: 1
    }

    95% {
        transform: translate(0,0);
        opacity: 1
    }

    100% {
        transform: translate(0,0);
        opacity: 0
    }
}

#game-canvas .bubbles {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: none;
    pointer-events: none;
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 65%;
    max-width: 65%;
    z-index: 300;
    font-size: 1.2em;
    flex-direction: column;
    align-items: flex-end;
    justify-items: end;
    justify-content: end;
    opacity: .92;
    background-color: unset
}

#game-canvas .bubbles p {
    max-width: 100%;
    position: relative;
    background-color: var(--COLOR_CHAT_BG_ALT);
    margin: 0 .25em .25em 0;
    padding: .25em .7em .25em .7em;
    border-radius: 1em;
    animation: canvas_bubble 2.5s ease-in-out 0s;
    backdrop-filter: blur(1em)
}

#game-canvas .bubbles span {
    max-width: 100%;
    word-break: break-all
}

#game-canvas {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: none;
    display: flex;
    flex: 1 1 auto;
    background-color: #fff;
    border-radius: var(--BORDER_RADIUS);
    grid-area: canvas;
    overflow: hidden;
    position: relative
}

#game-canvas canvas {
    width: 100%;
    height: auto;
    image-rendering: pixelated
}

#game-canvas .overlay {
    pointer-events: none;
    position: absolute;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(3,8,29,.8)
}

#game-canvas .overlay.show {
    opacity: 1;
    pointer-events: all
}

#game-canvas .overlay-content {
    font-size: 1em;
    position: absolute;
    width: 100%;
    height: 100%;
    top: -100%;
    text-shadow: 0 0 3px rgba(0,0,0,.6);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

#game-canvas .overlay-content .result,#game-canvas .overlay-content .reveal,#game-canvas .overlay-content .text,#game-canvas .overlay-content .words {
    display: none
}

#game-canvas .overlay-content .result.show,#game-canvas .overlay-content .reveal.show,#game-canvas .overlay-content .text.show,#game-canvas .overlay-content .words.show {
    display: flex
}

#game-canvas .overlay-content .text {
    color: #fff;
    font-size: 2.5em;
    flex-direction: column;
    align-items: center
}

#game-canvas .overlay-content .words {
    justify-content: center;
    flex-wrap: wrap;
    width: 100%
}

@keyframes word_introduce {
    0% {
        opacity: 0;
        transform: translate(0,-40%)
    }

    100% {
        opacity: 1;
        transform: translate(0,0)
    }
}

#game-canvas .overlay-content .words .word {
    cursor: pointer;
    flex: 0 0 auto;
    padding: 0 .35em;
    margin: .35em;
    font-size: 1.8em;
    font-weight: bolder;
    background-color: rgba(0,0,0,0);
    border: .15em solid #fff;
    border-radius: var(--BORDER_RADIUS);
    color: #fff;
    transition: background-color .1s,color .1s;
    animation: word_introduce .25s ease-in-out 0s 1 normal both
}

#game-canvas .overlay-content .words .word:hover {
    background-color: #fff;
    color: var(--COLOR_TEXT_CANVAS_TRANSPARENT);
    text-shadow: none
}

#game-canvas .overlay-content .reveal {
    flex-direction: column;
    align-items: center;
    width: 100%;
    font-size: 1.4em
}

#game-canvas .overlay-content .reveal p {
    font-weight: 400;
    font-size: 1.5em;
    margin: 0
}

#game-canvas .overlay-content .reveal p span.word {
    font-weight: 700;
    color: #ffdfb4;
    margin-left: 1ch
}

#game-canvas .overlay-content .reveal .reason {
    color: #d6d6d6;
    margin-bottom: 1.5em;
    font-size: 1em
}

#game-canvas .overlay-content .reveal .player-container {
    display: flex;
    flex-direction: column;
    width: 23ch
}

#game-canvas .overlay-content .reveal .player-container .player {
    font-size: 1em;
    width: 100%;
    display: flex;
    margin-bottom: -.3em
}

#game-canvas .overlay-content .reveal .player-container .player .name {
    flex: 1 1 80%
}

#game-canvas .overlay-content .reveal .player-container .player .score {
    text-align: end;
    flex: 0 0 20%;
    font-weight: 700;
    color: #17db17
}

#game-canvas .overlay-content .reveal .player-container .player .score.zero {
    color: #e01313
}

#game-canvas .overlay-content .result {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative
}

#game-canvas .overlay-content .result .message {
    display: flex;
    align-items: center;
    height: 25%;
    font-size: 2em
}

#game-canvas .overlay-content .result .message .winner-name {
    color: #ffdfb4
}

#game-canvas .overlay-content .result .avatar-container {
    position: relative
}

#game-canvas .overlay-content .result .avatar-container .avatar {
    position: absolute
}

#game-canvas .overlay-content .result .avatar-container .avatar.winner {
    transform-origin: 50% 100%;
    animation: player_winner 3.8s ease 0s infinite
}

@keyframes player_winner {
    0% {
        transform: rotate(0) scale(1,1) translate(0,0)
    }

    5%,8% {
        transform: rotate(0) scale(1.2,.8) translate(0,0)
    }

    14%,16% {
        transform: rotate(20deg) scale(.8,1.2) translate(10%,-50%)
    }

    24%,26% {
        transform: rotate(0) scale(1.4,.7) translate(0,0)
    }

    28%,38% {
        transform: rotate(0) scale(1,1) translate(0,0)
    }

    42% {
        transform: rotate(0) scale(1.2,.8) translate(0,0)
    }

    48%,50% {
        transform: rotate(-20deg) scale(.8,1.2) translate(-10%,-50%)
    }

    58%,60% {
        transform: rotate(0) scale(1.4,.7) translate(0,0)
    }

    100%,62% {
        transform: rotate(0) scale(1,1) translate(0,0)
    }
}

#game-canvas .overlay-content .result .trophy {
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    background-image: url(/drawapi/img/trophy.gif);
    background-size: cover;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, .25))
}

#game-canvas .overlay-content .result .ranks {
    width: 100%;
    height: 35%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    font-size: .9em
}

#game-canvas .overlay-content .result .rank {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 15%
}

#game-canvas .overlay-content .result .rank .avatar {
    width: 65%;
    height: auto;
    aspect-ratio: 1
}

#game-canvas .overlay-content .result .rank-place {
    color: #b4b4b4;
    font-weight: 700;
    position: absolute;
    top: 0;
    left: 10%
}

#game-canvas .overlay-content .result .rank-name {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
    font-size: .9em
}

#game-canvas .overlay-content .result .rank-score {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
    font-size: .7em
}

#game-canvas .overlay-content .result .podests {
    flex: 0 0 auto;
    font-size: 1em;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 40%;
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, .3))
}

#game-canvas .overlay-content .result .podests .podest-1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 27.5%;
    height: 100%;
    font-size: 1em;
    text-align: center;
    font-weight: 700;
    color: #ffc532;
    order: 1;
    margin-left: var(--BORDER_GAP);
    margin-right: var(--BORDER_GAP)
}

#game-canvas .overlay-content .result .podests .podest-1 .avatar-container {
    height: 60%;
    width: auto;
    aspect-ratio: 1
}

#game-canvas .overlay-content .result .podests .podest-1 .avatar-container .avatar {
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    top: 0
}

#game-canvas .overlay-content .result .podests .podest-1 .border {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    border: .5vh solid #ffc532;
    border-bottom: 0;
    width: 100%;
    height: 40%
}

#game-canvas .overlay-content .result .podests .podest-1 .rank-place {
    position: absolute;
    font-size: 1.3em;
    top: 0;
    left: .3em;
    color: #ffc532
}

#game-canvas .overlay-content .result .podests .podest-1 .border {
    border-radius: 1vh 1vh 0 0
}

#game-canvas .overlay-content .result .podests .podest-2 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 23.75%;
    height: 100%;
    font-size: 1em;
    text-align: center;
    font-weight: 700;
    color: silver;
    order: 0
}

#game-canvas .overlay-content .result .podests .podest-2 .avatar-container {
    height: 60%;
    width: auto;
    aspect-ratio: 1
}

#game-canvas .overlay-content .result .podests .podest-2 .avatar-container .avatar {
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    top: 0
}

#game-canvas .overlay-content .result .podests .podest-2 .border {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    border: .5vh solid silver;
    border-bottom: 0;
    width: 100%;
    height: 30%
}

#game-canvas .overlay-content .result .podests .podest-2 .rank-place {
    position: absolute;
    font-size: 1.3em;
    top: 0;
    left: .3em;
    color: silver
}

#game-canvas .overlay-content .result .podests .podest-2 .border {
    border-radius: 1vh 0 0 0;
    border-right: 0
}

#game-canvas .overlay-content .result .podests .podest-3 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 23.75%;
    height: 100%;
    font-size: 1em;
    text-align: center;
    font-weight: 700;
    color: #be6029;
    order: 2
}

#game-canvas .overlay-content .result .podests .podest-3 .avatar-container {
    height: 60%;
    width: auto;
    aspect-ratio: 1
}

#game-canvas .overlay-content .result .podests .podest-3 .avatar-container .avatar {
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    top: 0
}

#game-canvas .overlay-content .result .podests .podest-3 .border {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    border: .5vh solid #be6029;
    border-bottom: 0;
    width: 100%;
    height: 30%
}

#game-canvas .overlay-content .result .podests .podest-3 .rank-place {
    position: absolute;
    font-size: 1.3em;
    top: 0;
    left: .3em;
    color: #be6029
}

#game-canvas .overlay-content .result .podests .podest-3 .border {
    border-radius: 0 1vh 0 0;
    border-left: 0
}

#game-bar {
    grid-area: bar;
    height: 100%;
    font-size: 1em;
    font-weight: 700;
    color: #fff;
    text-align: center;
    position: relative;
    background-color: var(--COLOR_CHAT_BG_BASE);
    border-radius: var(--BORDER_RADIUS)
}

#game-bar .mobile {
    height: 100%;
    font-size: var(--vh);
    font-weight: 700;
    color: var(--COLOR_GAMEBAR_TEXT);
    pointer-events: none;
    display: none;
    position: absolute;
    top: 0;
    left: 0
}

#game-bar .mobile:hover {
    opacity: .3
}

#game-bar .mobile .drawtime {
    position: absolute
}

#game-bar .mobile .round {
    position: absolute;
    left: 3em
}

#game-bar .mobile img {
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .3));
    width: 3em;
    height: 3em
}

#game-bar .mobile span {
    font-size: 1.5em;
    line-height: 1.5em
}

#game-clock {
    pointer-events: none;
    position: absolute;
    width: 64px;
    height: 64px;
    background-image: url(/drawapi/img/clock.gif);
    background-size: contain;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .15));
    color: #000;
    font-size: 20px;
    line-height: 3.6;
    font-weight: bolder;
    z-index: 10;
    top: -10px;
    left: -8px;
    display: flex;
    justify-content: center;
    animation-name: none;
    animation-duration: .3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1
}

#game-round {
    position: absolute;
    left: 60px;
    top: 14px;
    font-size: 1.4em;
    color: var(--COLOR_GAMEBAR_ROUND_TEXT)
}

#game-word {
    height: 100%;
    font-family: Inconsolata,monospace;
    font-weight: bolder;
    color: var(--COLOR_GAMEBAR_TEXT);
    text-align: center;
    position: relative;
    font-size: 1em;
    margin-left: 200px;
    margin-right: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

#game-word .description {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    pointer-events: none;
    width: 100%;
    font-size: 1.1em;
    color: var(--COLOR_GAMEBAR_WORD_DESCRIPTION)
}

#game-word .description.waiting {
    top: 16px
}

#game-word .word {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    pointer-events: none;
    width: 100%;
    font-size: 1.8em
}

#game-word .hints {
    width: 100%;
    font-size: 1.8em;
    display: flex;
    justify-content: center;
    user-select: none
}

#game-word .hints .container {
    position: relative;
    display: flex;
    justify-content: center;
    gap: .08em
}

#game-word .hints .container .hint {
    width: 1ch;
    flex: 0 0 auto;
    animation: 0
}

@keyframes hint_uncover {
    0%,100% {
        color: #000;
        transform: translateY(0)
    }

    10% {
        color: #ffa844;
        transform: scale(1.35) translateY(-8px)
    }

    25% {
        transform: translateY(3px)
    }

    37% {
        transform: translateY(0)
    }
}

#game-word .hints .container .hint.uncover {
    animation: hint_uncover .8s ease-in-out 1
}

#game-word .hints .container .word-length {
    position: absolute;
    left: 102%;
    top: -.2em;
    font-size: .55em;
    font-weight: 700;
    white-space: nowrap
}

@keyframes rot_right {
    0%,100% {
        transform: rotate(0)
    }

    5% {
        transform: scale(1.15) rotate(25deg)
    }
}

@keyframes rot_left {
    0%,100% {
        transform: rotate(0)
    }

    5% {
        transform: scale(1.15) rotate(-25deg)
    }
}

.clickable {
    cursor: pointer;
    position: relative;
    color: var(--COLOR_TOOL_TEXT);
    background: var(--COLOR_TOOL_BASE);
    border-radius: var(--BORDER_RADIUS)
}

@keyframes clickable_icon_clicked {
    0% {
        transform: scale(1.15);
        opacity: 1
    }

    99% {
        opacity: 1
    }

    100% {
        transform: scale(1)
    }
}

.clickable .icon {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 1;
    top: 0;
    transition: top 65ms ease-in-out;
    animation: none
}

.clickable .key {
    cursor: pointer;
    opacity: .8;
    font-size: .9em;
    font-weight: bolder;
    text-transform: uppercase;
    position: absolute;
    left: .3em;
    top: -.1em;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    pointer-events: none
}

.clickable.selected .key,.clickable:hover .key {
    opacity: 1
}

.clickable:hover {
    background: var(--COLOR_TOOL_HOVER)
}

.clickable.selected {
    background-color: var(--COLOR_TOOL_ACTIVE)
}

.clickable:hover .icon {
    top: -4px
}

.clickable.clicked .icon {
    animation: clickable_icon_clicked .1s ease-in-out 1
}

.clickable.selected .icon,.clickable:hover .icon {
    opacity: 1
}

#game-toolbar {
    display: grid;
    gap: var(--BORDER_GAP);
    width: 100%;
    height: var(--UNIT);
    grid-template-columns: var(--UNIT) min-content var(--UNIT) 1fr min-content;
    grid-template-rows: var(--UNIT);
    grid-template-areas: "preview colors sizes tools actions";
    grid-area: tools;
    position: relative
}

#game-toolbar .tool {
    position: relative;
    width: var(--UNIT);
    height: var(--UNIT);
    overflow: hidden
}

#game-toolbar .tool .icon {
    opacity: .7;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter: grayscale(70%) var(--DROPSHADOW)
}

#game-toolbar .tool.selected .icon,#game-toolbar .tool:hover .icon {
    opacity: 1;
    filter: var(--DROPSHADOW)
}

#game-toolbar .toolbar-group-actions,#game-toolbar .toolbar-group-tools {
    height: 100%;
    display: flex;
    gap: var(--BORDER_GAP)
}

#game-toolbar .toolbar-group-tools {
    grid-area: tools;
    justify-content: center
}

#game-toolbar .toolbar-group-actions {
    grid-area: actions
}

#game-toolbar .sizes {
    grid-area: sizes;
    position: relative;
    width: var(--UNIT);
    height: var(--UNIT);
    display: flex;
    flex: 0 1 auto;
    justify-content: space-between
}

#game-toolbar .sizes .container {
    display: none;
    position: absolute;
    overflow: hidden;
    border-radius: var(--BORDER_RADIUS) var(--BORDER_RADIUS) 0 0;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, .3));
    bottom: 100%;
    left: 0;
    right: 0;
    flex-direction: column
}

#game-toolbar .sizes .container.open {
    display: flex
}

#game-toolbar .sizes .container .arrow {
    position: relative;
    order: 1;
    width: var(--UNIT);
    height: calc(var(--UNIT)/ 4);
    background-color: var(--COLOR_TOOL_SIZE_BASE);
    clip-path: polygon(50% 100%,25% 0,75% 0)
}

#game-toolbar .sizes .size-preview {
    cursor: pointer;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--BORDER_RADIUS);
    margin: 0
}

#game-toolbar .sizes .size-preview .icon {
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(/drawapi/img/size.gif);
    filter: brightness(0) var(--DROPSHADOW)
}

#game-toolbar .sizes .size-preview.selected .icon,#game-toolbar .sizes .size-preview:hover .icon {
    filter: brightness(0) var(--DROPSHADOW)
}

#game-toolbar .sizes .current-size {
    position: absolute;
    top: 0;
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #000;
    z-index: 5
}

#game-toolbar .sizes .size {
    cursor: pointer;
    position: relative;
    width: var(--UNIT);
    height: var(--UNIT);
    border-radius: 0;
    background-color: var(--COLOR_TOOL_SIZE_BASE)
}

#game-toolbar .sizes .size:first-of-type {
    border-radius: var(--BORDER_RADIUS) 0 0 var(--BORDER_RADIUS)
}

#game-toolbar .sizes .size:last-of-type {
    border-radius: 0 0 var(--BORDER_RADIUS) var(--BORDER_RADIUS)
}

#game-toolbar .sizes .size .icon {
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(/drawapi/img/size.gif);
    filter: brightness(0) var(--DROPSHADOW)
}

#game-toolbar .sizes .size:hover {
    background-color: var(--COLOR_TOOL_SIZE_HOVER)
}

#game-toolbar .sizes .size.selected {
    background-color: var(--COLOR_TOOL_SIZE_ACTIVE)
}

#game-toolbar .color-preview-mobile {
    display: none
}

#game-toolbar .color-preview,#game-toolbar .color-preview-mobile {
    grid-area: preview;
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
    width: var(--UNIT);
    height: var(--UNIT);
    overflow: hidden;
    border-radius: var(--BORDER_RADIUS)
}

#game-toolbar .colors {
    grid-area: colors;
    height: var(--UNIT);
    overflow: hidden;
    border-radius: var(--BORDER_RADIUS)
}

#game-toolbar .colors .top .color::after {
    border: 3px solid rgba(0,0,0,.6)
}

#game-toolbar .colors .bottom .color::after {
    border: 3px solid rgba(255,255,255,.6)
}

#game-toolbar .colors .bottom,#game-toolbar .colors .top {
    display: flex;
    height: 50%
}

#game-toolbar .colors .color {
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    flex: 1 1 auto;
    height: 100%;
    width: calc(var(--UNIT)/ 2)
}

#game-toolbar .colors .color::after {
    display: none;
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: 3px
}

#game-toolbar .colors .color:hover::after {
    display: inline
}

#color-preview-primary,#color-preview-secondary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#game-keyboard {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    touch-action: none;
    pointer-events: all;
    display: none;
    position: fixed;
    flex: 1 1 auto;
    bottom: 0;
    height: 30%;
    width: 100%;
    max-width: 70vh;
    font-size: 2vh
}

#game-keyboard .material-icons {
    font-size: 1em
}

#game-keyboard .keyboard-wrapper {
    position: absolute;
    top: calc(100% - 0px);
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(6,33,122,.9);
    backdrop-filter: blur(4px);
    transition: top .1s ease-in-out
}

#game-keyboard .settings {
    position: absolute;
    top: 2px;
    right: 2px;
    height: calc(0px - 4px);
    width: auto;
    aspect-ratio: 1;
    background-color: transparent
}

#game-keyboard .input {
    display: flex;
    width: 100%;
    height: 0;
    text-align: center;
    color: #fff;
    white-space: pre;
    justify-content: center;
    align-items: center
}

#game-keyboard .input span {
    display: none;
    font-size: 1.5em
}

#game-keyboard .input .hidden {
    font-size: .75em
}

#game-keyboard .input .cursor {
    display: none;
    width: .2ch;
    margin-left: .25ch;
    height: 80%;
    background-color: #fff;
    animation: keyboard_input_cursor 1s steps(2,start) 0s infinite
}

@keyframes keyboard_input_cursor {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

#game-keyboard .keys {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%
}

#game-keyboard .keys .row {
    display: flex;
    flex: 1 1 auto;
    justify-content: center
}

#game-keyboard .keys .key {
    flex: 1 1 1px;
    margin: .5vw;
    border-radius: .5vh;
    border: none;
    background-color: rgba(37,185,255,.26);
    color: #fff;
    outline: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: none;
    text-shadow: .08em .08em #00000070;
    box-shadow: 0 0 .5vh 0 #00000059
}

#game-keyboard .keys .key.enabled {
    color: var(--COLOR_INPUT_BORDER_FOCUS)
}

#game-keyboard .keys .key:active {
    background-color: rgba(37,185,255,.12)
}

#game-keyboard .keys .key.wide {
    flex: 1.35 1 auto
}

#game-keyboard .keys .key.extra-wide {
    flex: 3.5 1 auto
}

#home {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center
}

#home .ad-top {
    width: 100%;
    height: 100px;
    padding-left: 64px;
    padding-right: 64px;
    display: flex;
    justify-content: center
}

#home .ad-top .ad {
    flex: 1 1 auto;
    max-width: 970px;
    background-color: rgba(0,0,0,.5)
}

#home .logo-big {
    margin-top: 25px;
    margin-bottom: 40px
}

#home .logo-big img {
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .25))
}

#home .logo-big .avatar-container {
    margin-top: 10px;
    height: 48px;
    display: flex;
    justify-content: center;
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .25))
}

#home .logo-big .avatar-container .avatar {
    cursor: pointer;
    pointer-events: all;
    width: 48px;
    height: 48px
}

#home .news ::-webkit-scrollbar {
    width: 14px;
    border-radius: 7px;
    background-color: var(--COLOR_PANEL_LO)
}

#home .news ::-webkit-scrollbar-thumb {
    border-radius: 7px;
    background-color: var(--COLOR_PANEL_HI)
}

#home .news .head {
    font-size: 1.1em;
    font-weight: 700;
    display: flex;
    align-items: baseline;
    border-bottom: 1px solid var(--COLOR_PANEL_BORDER_FOCUS);
    margin-bottom: 8px
}

#home .news .head .title {
    flex: 1 1 auto
}

#home .news .head .date {
    flex: 0 0 auto;
    font-size: .75em
}

#home .news .content {
    max-height: 400px;
    overflow-y: auto
}

#home .news .content ul {
    font-size: .9em;
    margin: 0;
    padding-left: 24px
}

#home .panels {
    display: flex;
    width: 100%
}

#home .panel {
    flex: 0 0 auto;
    width: 400px;
    background-color: var(--COLOR_PANEL_BG);
    border-radius: var(--BORDER_RADIUS);
    padding: 15px
}

#home .panel-left {
    margin-right: 8px;
    flex: 1 1 50%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end
}

#home .panel-right {
    margin-left: 8px;
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

#home .socials {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #bebebe;
    font-size: .85em;
    margin-bottom: 1em
}

#home .socials p {
    margin-top: 0;
    margin-bottom: .25em
}

#home .socials .icons {
    display: flex
}

#home .socials .icons a {
    margin-left: .3em;
    margin-right: .3em
}

#home .socials .icons a img {
    opacity: .7;
    image-rendering: auto;
    height: 1.8em;
    transition: transform 50ms ease-in-out
}

#home .socials .icons a img:hover {
    transform: scale(1.1);
    opacity: 1
}

#home .container-name-lang {
    display: flex;
    flex-direction: row
}

#home input {
    height: 34px;
    flex: 1 1 auto;
    font-weight: 700
}

#home select {
    height: 34px;
    flex: 0 0 auto;
    width: 120px;
    margin-left: 4px;
    padding-left: 2px
}

#home .button-play {
    background-color: #53e237;
    text-shadow: 2px 2px 0 #0000002b;
    transition: background-color 80ms;
    border-radius: var(--BORDER_RADIUS);
    font-size: 2em;
    height: 54px;
    width: 100%
}

#home .button-play:hover:not(:disabled) {
    background-color: #38c41c
}

#home .button-play:active:not(:disabled) {
    background-color: #30aa19;
    padding-top: 2px
}

#home .button-play img {
    width: 45px;
    height: 45px;
    margin-right: 0;
    margin-bottom: 6px;
    vertical-align: middle;
    filter: drop-shadow(2px 2px 0 #0000002b)
}

#home .button-create {
    background-color: #2c8de7;
    text-shadow: 2px 2px 0 #0000002b;
    transition: background-color 80ms;
    height: 40px;
    border-radius: var(--BORDER_RADIUS);
    width: 100%;
    font-size: 1.2em;
    font-weight: 700;
    margin-top: 10px
}

#home .button-create:hover:not(:disabled) {
    background-color: #1671c5
}

#home .button-create:active:not(:disabled) {
    background-color: #1361a9;
    padding-top: 2px
}

#home .button-create img {
    width: 30px;
    height: 30px;
    margin-right: 6px;
    margin-bottom: 4px;
    vertical-align: middle;
    filter: drop-shadow(2px 2px 0 #0000002b)
}

#home .avatar-customizer {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    position: relative;
    background: rgba(0,0,0,.1);
    padding: 8px;
    border-radius: var(--BORDER_RADIUS)
}

#home .avatar-customizer .randomize {
    cursor: pointer;
    position: absolute;
    width: 32px;
    height: 32px;
    right: 4px;
    top: 4px;
    opacity: .6;
    background-image: url(/drawapi/img/randomize.gif);
    transition: opacity .15s ease,transform .15s ease
}

#home .avatar-customizer .randomize:hover {
    opacity: 1;
    transform: scale(1.2)
}

#home .avatar-customizer .container {
    width: 96px;
    height: 96px
}

#home .avatar-customizer .arrows {
    display: flex;
    flex-direction: column;
    justify-content: space-around
}

#home .avatar-customizer .arrows .arrow {
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, .15));
    flex: 0 0 auto;
    cursor: pointer;
    width: 34px;
    height: 34px;
    background-image: url(/drawapi/img/arrow.gif);
    background-size: 200%;
    background-repeat: no-repeat
}

#home .avatar-customizer .arrows.left .arrow {
    background-position: 0 0
}

#home .avatar-customizer .arrows.left .arrow:hover {
    background-position: 100% 0
}

#home .avatar-customizer .arrows.right .arrow {
    background-position: 0 100%
}

#home .avatar-customizer .arrows.right .arrow:hover {
    background-position: 100% 100%
}

#home #tutorial {
    position: relative;
    width: 100%
}

#home #tutorial .pages {
    width: 100%
}

#home #tutorial .pages .page {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center
}

#home #tutorial .pages .page.active {
    display: flex
}

#home #tutorial .pages .page img {
    width: 100%;
    height: auto;
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .25));
    animation: img_introduce .3s ease-in-out 1
}

@keyframes img_introduce {
    0% {
        top: -40px;
        opacity: 0
    }

    100% {
        top: 0;
        opacity: 1
    }
}

#home #tutorial .pages .page .description {
    text-align: center;
    width: 100%;
    height: 3em
}

#home #tutorial .navigation {
    width: 100%;
    height: 25px
}

#home .bottom {
    width: 100%;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

#home .bottom svg {
    width: 100%;
    height: 40px;
    fill: var(--COLOR_PANEL_BG)
}

#home .bottom .footer {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    background-color: var(--COLOR_PANEL_BG)
}

#home .bottom .footer .notice {
    width: 100%;
    text-align: center;
    font-size: .8em;
    color: #677af9
}

#home .bottom .footer .tos {
    width: 100%;
    text-align: center
}

#home .bottom .footer .tos a {
    margin-left: 4px;
    margin-right: 4px
}

#home .bottom .footer .section-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%
}

#home .bottom .footer .section-container .section {
    position: relative;
    font: inherit;
    color: var(--COLOR_PANEL_TEXT);
    width: 320px;
    margin: 10px
}

#home .bottom .footer .section-container .section .icon {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 32px;
    height: 32px;
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .25))
}

#home .bottom .footer .section-container .section h2 {
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
    text-align: center
}

@keyframes frames_modal_opacity {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes frames_modal_position {
    0% {
        top: -21%
    }

    100% {
        top: 0
    }
}

#modal {
    font-size: 15px;
    display: none;
    overscroll-behavior: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background-color: rgba(0,0,0,.55);
    animation: frames_modal_opacity .21s ease-in-out
}

#modal input,#modal select {
    font-size: 1em;
    height: 2em
}

#modal button {
    font-size: 1em;
    padding: 0 .3em 0 .3em;
    width: 100%;
    background-color: var(--COLOR_PANEL_BUTTON);
    text-shadow: 2px 2px 0 #0000007a;
    transition: background-color .1s;
    height: 2.5em;
    border-radius: var(--BORDER_RADIUS)
}

#modal button:hover:not(:disabled) {
    background-color: var(--COLOR_PANEL_BUTTON_HOVER)
}

#modal button:active:not(:disabled) {
    background-color: var(--COLOR_PANEL_BUTTON_ACTIVE)
}

#modal .modal-container-settings {
    width: 500px;
    flex-direction: column
}

#modal .modal-container-settings button.reset {
    position: absolute;
    right: 0;
    width: auto;
    height: 100%
}

#modal .modal-container-settings .volume-value {
    margin-left: .5ch
}

#modal .modal-container-settings .group {
    margin-bottom: 1em
}

#modal .modal-container-settings .group:last-child {
    margin-bottom: 0
}

#modal .modal-container-settings .group .title {
    position: relative;
    display: flex;
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: .1em
}

#modal .modal-container-settings .group .title .icon {
    display: inline;
    width: 1.4em;
    height: 1.4em;
    margin-right: .5ch;
    background-size: contain;
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .3))
}

#modal .modal-container-settings .group .title .icon.hotkeys {
    background-image: url(/drawapi/img/key.gif)
}

#modal .modal-container-settings .group .title .icon.misc {
    background-image: url(/drawapi/img/questionmark.gif)
}

#modal .modal-container-settings .group .title .icon.volume {
    background-image: url(/drawapi/img/audio.gif)
}

#modal .modal-container-settings .group .title .icon.volume.muted {
    background-image: url(/drawapi/img/audio_off.gif)
}

#modal .modal-container-settings .group .item {
    margin-bottom: .5em
}

#modal .modal-container-settings .group .item:last-child {
    margin-bottom: 0
}

#modal .modal-container-settings .group #hotkey-list {
    display: flex
}

#modal .modal-container-settings .group #hotkey-list input {
    text-transform: uppercase
}

#modal .modal-container-settings .group #hotkey-list .item {
    margin-right: .5em
}

#modal .modal-container-settings .group #hotkey-list .item:last-child {
    margin-right: 0
}

#modal .modal-container-info {
    width: 410px;
    flex-direction: column;
    align-items: center;
    text-align: center
}

#modal .modal-container-info .message {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8em
}

#modal .modal-container-player {
    width: 350px;
    display: flex;
    justify-content: space-between
}

#modal .modal-container-player button {
    flex: 1 1 auto;
    height: auto;
    margin-top: .5em
}

#modal .modal-container-player button.ban,#modal .modal-container-player button.kick {
    flex: 1 1 auto
}

#modal .modal-container-player button.kick {
    margin-right: .5em
}

#modal .modal-container-player button#report-send {
    height: 2.3em;
    margin-top: 0
}

#modal .modal-container-player button#modal-player-button-invite {
    flex: 0 0 auto;
    height: 2.3em
}

#modal .modal-container-player .invite {
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto
}

#modal .modal-container-player .invite .text {
    font-size: 1.3em;
    text-align: center;
    flex: 0 0 auto
}

#modal .modal-container-player .buttons {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto
}

#modal .modal-container-player .buttons .button-pair {
    flex: 1 1 auto;
    height: auto
}

#modal .modal-container-player .buttons .button-pair button {
    margin-top: 0
}

#modal .modal-container-player .player {
    width: 10em;
    height: 10em;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

#modal .modal-container-player .player .name {
    width: 100%;
    font: inherit;
    font-size: 1em;
    font-weight: 700;
    text-align: center
}

#modal .modal-container-player .report-menu {
    width: 100%;
    display: flex;
    flex-direction: column
}

#modal .modal-container-player .report-menu .description {
    font-weight: 700;
    font-size: 1.2em;
    margin-bottom: 1em
}

#modal .modal-container-player .report-menu .row {
    display: flex;
    margin-bottom: .35em
}

#modal .modal-container-player .report-menu .row label {
    flex: 1 1 auto
}

#modal .modal-container-player .report-menu .row input {
    height: 100%;
    width: auto;
    aspect-ratio: 1
}

#modal .modal-container-room {
    flex-direction: column
}

#modal .modal-container-room .settings {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 600px;
    padding-bottom: 4px;
    border-bottom: 1px solid #ffffff61;
    margin-bottom: 4px
}

#modal .modal-container-room .settings .setting {
    flex: 0 0 50%;
    margin-bottom: 7px
}

#modal .modal-container-room .settings .setting img {
    vertical-align: middle;
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .3))
}

#modal .modal-container-room .settings .setting span {
    line-height: 0;
    margin-left: 7px
}

#modal .modal-container-room .settings .setting .value {
    font-weight: 700
}

#modal .modal-wrapper {
    position: relative;
    pointer-events: none;
    animation: frames_modal_position .21s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%
}

#modal .modal-container {
    pointer-events: all;
    position: relative;
    background-color: var(--COLOR_PANEL_BG);
    backdrop-filter: blur(4px);
    border-radius: 10px;
    box-shadow: 0 0 50px 0 rgba(0,0,0,.15);
    display: flex;
    flex-direction: column
}

#modal .modal-container .modal-title {
    flex: 0 0 auto;
    position: relative;
    padding: .5em .5em 0 .5em;
    font-size: 1.8em;
    font-weight: 700;
    color: #fff
}

#modal .modal-container .modal-title .close {
    position: absolute;
    top: 0;
    right: .3ch;
    line-height: 1;
    color: #aaa;
    font-size: 1.5em
}

#modal .modal-container .modal-title .close:focus,#modal .modal-container .modal-title .close:hover {
    color: #fff;
    text-decoration: none;
    cursor: pointer
}

#modal .modal-container .modal-content {
    flex: 1 1 auto;
    padding: 1em;
    padding-top: .5em;
    white-space: pre-line;
    color: #fff
}

@media (min-aspect-ratio: 1) and (max-width:1166px) {
    #game-toolbar {
        height:calc(var(--UNIT) * 2 + var(--BORDER_GAP));
        grid-template-columns: var(--UNIT) 1fr 1fr var(--UNIT);
        grid-template-rows: var(--UNIT) var(--UNIT);
        grid-template-areas: "preview colors colors sizes" "tools   tools actions actions"
    }

    #game-toolbar .toolbar-group-tools {
        justify-content: flex-start
    }

    #game-toolbar .toolbar-group-actions {
        justify-content: flex-end
    }
}

@media (max-aspect-ratio: 1) {
    :root {
        --PLAYERS_PER_PAGE:9999;
        --BORDER_GAP: 0.5vw;
        --BORDER_RADIUS: 0.25vw;
        --UNIT: 10vw;
        --FONT_SIZE: 2.5vw
    }

    #modal {
        font-size: 1.7vh
    }

    #modal .modal-container {
        width: 95vw
    }

    #modal .modal-container-info,#modal .modal-container-player,#modal .modal-container-room,#modal .modal-container-settings {
        width: 100%
    }

    #home {
        height: auto;
        font-size: 2vh
    }

    #home input {
        height: 4.25vh;
        width: 65%
    }

    #home select {
        height: 4.25vh;
        width: calc(35% - 1.25vh / 2);
        margin-left: .625vh
    }

    #home .button-play {
        height: 7vh
    }

    #home .button-create {
        height: 5vh;
        margin-top: 1.25vh
    }

    #home .avatar-customizer {
        padding: 1.25vh;
        margin-top: 1.25vh;
        margin-bottom: 1.25vh
    }

    #home .avatar-customizer .randomize {
        width: 5vh;
        height: 5vh;
        right: 1.25vh;
        top: 1.25vh;
        background-size: cover
    }

    #home .avatar-customizer .container {
        width: 15vh;
        height: 15vh
    }

    #home .avatar-customizer .arrows .arrow {
        width: 5vh;
        height: 5vh
    }

    #home .logo-big {
        margin-top: 6vh;
        margin-bottom: 4vh;
        width: 95vw;
        max-width: 65vh
    }

    #home .logo-big img {
        width: 100%;
        height: auto
    }

    #home .logo-big .avatar-container {
        width: 100%;
        margin-top: 1.5vh;
        height: auto
    }

    #home .logo-big .avatar-container .avatar {
        width: 10%;
        height: auto;
        aspect-ratio: 1
    }

    #home .panels {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 95vw;
        max-width: 55vh
    }

    #home .panel {
        width: 100%;
        padding: 1.75vh
    }

    #home .panel-left,#home .panel-right {
        flex: 0 0 auto
    }

    #home .news .content {
        max-height: 40vh
    }

    #home #tutorial .navigation {
        height: 4vh
    }

    #home .bottom {
        margin-top: 5vh
    }

    #home .bottom svg {
        height: 2vh
    }

    #home .bottom .footer {
        padding-top: 1.25vh;
        padding-bottom: 1.25vh
    }

    #home .bottom .footer .section-container {
        flex-direction: column;
        align-items: center
    }

    #home .bottom .footer .section-container .section {
        width: 95vw;
        max-width: 55vh;
        padding: 1.25vh;
        margin: 0;
        margin-bottom: 1.25vh
    }

    #home .bottom .footer .section-container .section h2 {
        margin-bottom: 2vh
    }

    #home .bottom .footer .section-container .section .icon {
        width: 4vh;
        height: 4vh;
        top: 1vh;
        left: 1vh
    }

    #home .panel-left {
        margin-right: 0;
        margin-bottom: 8px
    }

    #home .panel-right {
        margin-left: 0;
        margin-top: 8px
    }

    #game {
        display: flex;
        align-items: center;
        height: var(--vh);
        width: 100%;
        margin-left: 0;
        margin-right: 0
    }

    #game-invite {
        grid-area: toolsA/toolsA/toolsB/toolsB;
        font-size: 1.3em;
        height: 100%
    }

    #game-invite .title {
        display: none
    }

    .clickable .key {
        display: none
    }

    #game-wrapper {
        height: 100%;
        width: 100%;
        grid-template-areas: "bar     bar" "canvasA canvasB" "toolsA  toolsB" "players chat" "input   input";
        grid-template-columns: calc(50% - var(--BORDER_GAP)/ 2) calc(50% - var(--BORDER_GAP)/ 2);
        grid-template-rows: var(--UNIT) min-content var(--UNIT) 1fr min-content
    }

    #game-wrapper.toolbar-hidden #game-players {
        grid-area: toolsA/toolsA/players/players
    }

    #game-wrapper.toolbar-hidden #game-chat {
        grid-area: toolsB/toolsB/chat/chat
    }

    #game-wrapper.toolbar-hidden #game-toolbar {
        display: none
    }

    #game.mobile-input-top #game-wrapper {
        grid-template-areas: "bar     bar" "canvasA canvasB" "input   input" "toolsA  toolsB" "players chat";
        grid-template-columns: calc(50% - var(--BORDER_GAP)/ 2) calc(50% - var(--BORDER_GAP)/ 2);
        grid-template-rows: var(--UNIT) min-content min-content var(--UNIT) 1fr
    }

    #game-players-footer {
        display: none
    }

    #game-players {
        width: 100%
    }

    #game-players .players-list {
        width: 100%;
        overflow-y: scroll;
        overflow-x: hidden
    }

    #game-players .avatar {
        width: 90%;
        height: 90%;
        top: 5%;
        left: 5%
    }

    #game-players .player .player-icons .icon {
        width: calc(var(--UNIT)/ 2);
        height: calc(var(--UNIT)/ 2);
        margin-right: calc(var(--UNIT)/ 10)
    }

    #game-players .player .avatar .drawing {
        width: calc(var(--UNIT) * .875);
        height: calc(var(--UNIT) * .875);
        right: calc(var(--UNIT) * .625);
        top: 0
    }

    #game-chat-input-mobile {
        font-size: 1.4em;
        display: unset;
        grid-area: input
    }

    #game-chat-input-mobile .chat-form {
        padding: 0
    }

    #game-chat-input-mobile input {
        text-align: center;
        border: none
    }

    #game-chat {
        width: 100%
    }

    #game-chat .chat-form {
        display: none
    }

    #game-toolbar {
        grid-area: toolsA/toolsA/toolsB/toolsB;
        height: var(--UNIT);
        grid-template-rows: var(--UNIT);
        grid-template-areas: "preview sizes tools tools actions actions"
    }

    #game-toolbar .colors {
        display: none
    }

    #game-toolbar .colors.open {
        z-index: 300;
        --COLOR_ITEM_SIZE: calc(100vw / 13);
        display: inline-block;
        position: absolute;
        bottom: calc(100% + var(--BORDER_GAP) * 1);
        left: 0;
        right: 0;
        height: calc(var(--COLOR_ITEM_SIZE) * 2);
        filter: drop-shadow(0 0 .2em rgba(0, 0, 0, .3))
    }

    #game-toolbar .colors.open .bottom,#game-toolbar .colors.open .top {
        height: calc(var(--COLOR_ITEM_SIZE))
    }

    #game-toolbar .colors.open .color {
        width: var(--COLOR_ITEM_SIZE);
        height: var(--COLOR_ITEM_SIZE)
    }

    #game-toolbar .toolbar-group-tools {
        justify-content: center
    }

    #game-toolbar .toolbar-group-actions {
        justify-content: flex-end
    }

    #game-toolbar .color-preview {
        display: none
    }

    #game-toolbar .color-preview-mobile {
        display: inline-block
    }

    #game-settings {
        width: var(--UNIT);
        height: var(--UNIT)
    }

    #game-word {
        margin-left: 0;
        margin-right: 0
    }

    #game-round {
        font-size: .8em;
        top: unset;
        left: 0;
        bottom: 0;
        width: unset
    }

    #game-clock {
        top: calc(var(--UNIT)*-.02);
        left: calc(var(--UNIT)*.2);
        width: calc(var(--UNIT)*.75);
        height: calc(var(--UNIT)*.75);
        padding-top: calc(var(--UNIT)*.22);
        line-height: calc(var(--UNIT)*.45);
        font-size: .8em;
        filter: var(--DROPSHADOW)
    }

    .ad-1 {
        width: 100%
    }

    .ad-2 {
        display: none
    }

    #game-logo {
        display: none;
        width: 100%;
        height: 100%
    }

    #game-logo a {
        display: none
    }

    #game-canvas .bubbles {
        display: flex
    }

    #game-canvas {
        grid-area: canvasA/canvasA/canvasB/canvasB
    }

    #game-canvas canvas {
        height: 100%
    }

    #game-canvas .room {
        font-size: 1em;
        padding: 0
    }

    #game-canvas .room .group-settings {
        grid-template-columns: 3fr 2fr 3fr 2fr
    }

    #game-canvas .room button {
        font-size: 1.2em
    }

    html[data-mobile-keyboard] #game.mobile-input-focus #game-keyboard {
        display: inline
    }

    html[data-mobile-keyboard] #game.mobile-input-focus #game-keyboard .keyboard-wrapper {
        top: 0
    }

    html[data-mobile-keyboard] #game.mobile-input-focus #game-keyboard .input .hidden {
        display: none
    }

    html[data-mobile-keyboard] #game.mobile-input-focus #game-keyboard .input .cursor,html[data-mobile-keyboard] #game.mobile-input-focus #game-keyboard .input span {
        display: inline
    }

    html[data-mobile-keyboard] #game.mobile-input-focus #game-wrapper {
        height: 70%
    }
}

html[data-halloween] {
    --COLOR_PANEL_BG: #340c96bf;
    --COLOR_PANEL_LO: #420783bf;
    --COLOR_PANEL_HI: #4a16c9;
    --COLOR_PANEL_BORDER_FOCUS: #9656fd;
    --COLOR_PANEL_BUTTON: #892ad1;
    --COLOR_PANEL_BUTTON_HOVER: #9436dc;
    --COLOR_PANEL_BUTTON_ACTIVE: #7f22c6;
    --COLOR_TOOL_TIP_BG: #a843f5
}

html[data-halloween] body {
    background-image: url(/drawapi/img/background_halloween.png)
}

html[data-halloween] #home .logo-big img {
    content: url(/drawapi/img/logo_halloween.gif)
}

html[data-halloween] #game-logo a img {
    content: url(/drawapi/img/logo_halloween.gif)
}