.grid {
    grid-template: 120px 200px 200px 300px 20px / 200px 250px 50px 300px auto 50px;
}

.s-block,
.block,
.b-block {
    width: 180px;
}

.a5 {
    width: 180px !important;
}

#tlltelbow,
#tlltelbow.block {
    width: 180px !important;
}

.lt-corner-bck,
.lb-corner-bck {
    left: 180px;
}

.lt-corner {
    height: 180px;
}

body.game-active .b-block,
body.game-active .a5 {
    width: 25px !important;
}

body.game-active #tlltelbow,
body.game-active #tlltelbow.block {
    width: 25px !important;
}

body.game-active .lt-corner-bck {
    left: 25px;
}

body.game-active .a11.t-bar {
    grid-area: 3 / 1 / 3 / span 4;
    margin-left: 31px;
    width: 735px;
}

.hangman-frame {
    padding-top: 18px;
}

.intro-picture {
    display: block;
    width: 230px;
    max-width: 78%;
    height: auto;
    margin: 38px auto 0;
}

.hangman-stage {
    position: relative;
    top: -26px;
    width: 360px;
    height: 275px;
    margin: 0 auto;
}

.gallows-base,
.gallows-post,
.gallows-top,
.gallows-rope,
.man {
    position: absolute;
    background: #8f9098;
    box-shadow: 0 0 10px rgba(180, 180, 190, 0.34);
}

body.palette-tos {
    --y1: #ffc857;
    --y2: #f6ae2d;
    --o1: #f26419;
    --r1: #ef476f;
    --r2: #d62828;
    --r3: #ba181b;
    --b1: #9bf6ff;
    --b2: #00b4d8;
    --b3: #0077b6;
    --v1: #b8c0ff;
    --v2: #8e9aef;
    --v3: #5e60ce;
    --g1: #6c757d;
}

body.palette-tas {
    --y1: #ffdc5e;
    --y2: #ffb703;
    --o1: #fb8500;
    --r1: #ffafcc;
    --r2: #ff4d6d;
    --r3: #c9184a;
    --b1: #caf0f8;
    --b2: #48cae4;
    --b3: #0096c7;
    --v1: #ffc6ff;
    --v2: #bdb2ff;
    --v3: #8338ec;
    --g1: #8d99ae;
}

body.palette-tmp {
    --y1: #f7d794;
    --y2: #e8c07d;
    --o1: #d99058;
    --r1: #e6b8a2;
    --r2: #b56576;
    --r3: #8b1e3f;
    --b1: #d8e2dc;
    --b2: #9fb8c9;
    --b3: #577590;
    --v1: #cdb4db;
    --v2: #9d8189;
    --v3: #6d597a;
    --g1: #8a817c;
}

body.palette-tng {
    --y1: #ff9f1c;
    --y2: #ffbf69;
    --o1: #ff6b35;
    --r1: #ff8fa3;
    --r2: #c1121f;
    --r3: #ef233c;
    --b1: #9bf6ff;
    --b2: #4cc9f0;
    --b3: #4361ee;
    --v1: #c77dff;
    --v2: #9d4edd;
    --v3: #7b2cbf;
    --g1: #7d8597;
}

body.palette-ds9 {
    --y1: #d6a84f;
    --y2: #c78c2f;
    --o1: #b5651d;
    --r1: #d08c60;
    --r2: #9d4e31;
    --r3: #7f1d1d;
    --b1: #b8d8d8;
    --b2: #6b8f9c;
    --b3: #355070;
    --v1: #b5838d;
    --v2: #8d6a9f;
    --v3: #5f4b66;
    --g1: #6f6259;
}

body.palette-voy {
    --y1: #ffd166;
    --y2: #f9c74f;
    --o1: #f9844a;
    --r1: #ffadad;
    --r2: #f94144;
    --r3: #c9184a;
    --b1: #90dbf4;
    --b2: #4cc9f0;
    --b3: #3a86ff;
    --v1: #bdb2ff;
    --v2: #9381ff;
    --v3: #6930c3;
    --g1: #5c677d;
}

body.palette-ent {
    --y1: #e9c46a;
    --y2: #d4a373;
    --o1: #e76f51;
    --r1: #f4a261;
    --r2: #bc6c25;
    --r3: #9b2226;
    --b1: #a8dadc;
    --b2: #457b9d;
    --b3: #1d3557;
    --v1: #adb5bd;
    --v2: #6c757d;
    --v3: #495057;
    --g1: #778da9;
}

body.palette-dsc {
    --y1: #ffd60a;
    --y2: #ffc300;
    --o1: #ff7b00;
    --r1: #ffb3c1;
    --r2: #ff4d6d;
    --r3: #c1121f;
    --b1: #a9def9;
    --b2: #00b4d8;
    --b3: #023e8a;
    --v1: #c77dff;
    --v2: #7b2cbf;
    --v3: #240046;
    --g1: #5c677d;
}

body.palette-pic {
    --y1: #f2cc8f;
    --y2: #e9c46a;
    --o1: #f4a261;
    --r1: #e5989b;
    --r2: #b5838d;
    --r3: #6d6875;
    --b1: #bee9e8;
    --b2: #62b6cb;
    --b3: #1b4965;
    --v1: #cdb4db;
    --v2: #9f86c0;
    --v3: #5e548e;
    --g1: #6c757d;
}

body.palette-ld {
    --y1: #ffd166;
    --y2: #fee440;
    --o1: #f15bb5;
    --r1: #ff99c8;
    --r2: #ef476f;
    --r3: #d00000;
    --b1: #9bf6ff;
    --b2: #00bbf9;
    --b3: #4361ee;
    --v1: #c77dff;
    --v2: #9b5de5;
    --v3: #7209b7;
    --g1: #8d99ae;
}

body.palette-pro {
    --y1: #f9dc5c;
    --y2: #ffb703;
    --o1: #fb8500;
    --r1: #f72585;
    --r2: #b5179e;
    --r3: #7209b7;
    --b1: #90e0ef;
    --b2: #00b4d8;
    --b3: #0077b6;
    --v1: #b5179e;
    --v2: #7209b7;
    --v3: #560bad;
    --g1: #6c757d;
}

body.palette-snw {
    --y1: #ffe066;
    --y2: #fab005;
    --o1: #fd7e14;
    --r1: #ffa8a8;
    --r2: #ff6b6b;
    --r3: #e03131;
    --b1: #d0ebff;
    --b2: #74c0fc;
    --b3: #1c7ed6;
    --v1: #e5dbff;
    --v2: #b197fc;
    --v3: #7048e8;
    --g1: #868e96;
}

body.palette-kelvin {
    --y1: #ffd166;
    --y2: #fca311;
    --o1: #e85d04;
    --r1: #ffb4a2;
    --r2: #e5383b;
    --r3: #a4161a;
    --b1: #edf6f9;
    --b2: #83c5be;
    --b3: #006d77;
    --v1: #bde0fe;
    --v2: #a2d2ff;
    --v3: #4361ee;
    --g1: #adb5bd;
}

body.palette-bw {
    --y1: #ffffff;
    --y2: #e5e5e5;
    --o1: #cfcfcf;
    --r1: #b8b8b8;
    --r2: #9f9f9f;
    --r3: #7a7a7a;
    --b1: #f5f5f5;
    --b2: #d6d6d6;
    --b3: #a3a3a3;
    --v1: #eeeeee;
    --v2: #c2c2c2;
    --v3: #8a8a8a;
    --g1: #666666;
}

.gallows-base {
    left: 58px;
    bottom: 20px;
    width: 170px;
    height: 10px;
    border-radius: 10px;
    background: #8f9098;
}

.gallows-post {
    left: 88px;
    bottom: 20px;
    width: 10px;
    height: 255px;
    border-radius: 0 0 10px 10px;
    background: #8f9098;
}

.gallows-top {
    left: 88px;
    top: 0;
    width: 160px;
    height: 10px;
    border-radius: 0 10px 10px 0;
    background: #8f9098;
}

.gallows-rope {
    left: 242px;
    top: 10px;
    width: 6px;
    height: 34px;
    background: #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
    transform-origin: top center;
    animation: ropeDrift 2.1s ease-in-out infinite;
}

.man-swing {
    position: absolute;
    inset: 0;
    --man-color: #ffffff;
    transform-origin: 245px 10px;
    animation: bodySwing 2.1s ease-in-out infinite;
    will-change: transform;
}

.man-swing.man-color-1 {
    --man-color: #fff0d8;
}

.man-swing.man-color-2 {
    --man-color: #ffd28a;
}

.man-swing.man-color-3 {
    --man-color: #ffaa55;
}

.man-swing.man-color-4 {
    --man-color: #ff7a33;
}

.man-swing.man-color-5 {
    --man-color: #ff441f;
}

.man-swing.man-color-6 {
    --man-color: var(--r3);
}

.man {
    display: none;
    box-shadow: 0 0 12px color-mix(in srgb, var(--man-color) 55%, transparent);
}

.head {
    left: 217px;
    top: 40px;
    width: 54px;
    height: 54px;
    border: 5px solid var(--man-color);
    border-radius: 50%;
    background: transparent;
    color: var(--man-color);
}

.head::before,
.head::after {
    content: "";
    position: absolute;
    top: 12px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: eyeBlink 5.4s infinite;
    transform-origin: center;
}

.head::before {
    left: 10px;
}

.head::after {
    right: 10px;
}

.head .face-mouth {
    position: absolute;
    left: 11px;
    top: 27px;
    width: 22px;
    height: 10px;
    border: 4px solid currentColor;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-radius: 0 0 22px 22px;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--man-color) 25%, transparent);
}

.head.face-sad .face-mouth {
    top: 31px;
    border-top: 4px solid currentColor;
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -3px 0 color-mix(in srgb, var(--man-color) 25%, transparent);
}

.body {
    left: 242px;
    top: 92px;
    width: 7px;
    height: 66px;
    background: var(--man-color);
    border-radius: 10px;
}

.arm-left,
.arm-right,
.leg-left,
.leg-right {
    width: 7px;
    height: 54px;
    background: var(--man-color);
    border-radius: 10px;
    transform-origin: top center;
}

.arm-left {
    left: 240px;
    top: 104px;
    transform: rotate(42deg);
}

.arm-right {
    left: 245px;
    top: 104px;
    transform: rotate(-42deg);
}

.leg-left {
    left: 240px;
    top: 156px;
    transform: rotate(35deg);
}

.leg-right {
    left: 245px;
    top: 156px;
    transform: rotate(-35deg);
}

.word-display {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 735px;
    max-width: 735px;
    min-height: 116px;
    padding: 0;
    box-sizing: border-box;
    margin: 0 auto;
}

.letter-slot {
    width: 35px;
    min-width: 35px;
    max-width: 35px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-bottom: 5px solid var(--o1);
    color: var(--b1);
}

.word-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 2px;
    width: 100%;
    max-width: 610px;
}

.word-group {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 2px;
    white-space: nowrap;
}

.space-slot {
    display: inline-flex;
    width: 25px;
    min-width: 25px;
    border-bottom: 0;
}

.hangman-control-area {
    display: grid;
    position: relative;
    grid-template-rows: 190px 20px 56px;
    align-content: end;
    width: 765px;
    height: 300px;
}

.hangman-control-area::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0px;
    width: 100%;
    height: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: var(--g1);
}

.keyboard-bottom-line {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: var(--g1);
}

#ans_area {
    width: 735px;
    margin-left: 0;
}

body.game-active #ans_area {
    grid-area: 4 / 1 / 4 / span 4;
    margin-left: 31px;
}

.keyboard {
    height: 190px;
    display: grid;
    position: relative;
    z-index: 1;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    grid-gap: 4px;
    padding: 4px;
    background-color: var(--b0) !important;
}

.keyboard.group-layout {
    grid-template-columns:  repeat(12, minmax(0, 1fr));
}

.letter-btn {
    width: 55px;
    height: 55px;
    border: 0;
    border-radius: 20px;
    background: var(--y1);
    color: var(--b0);
    cursor: pointer;
    font-family: inherit;
    font-size: 1em;
    font-weight: 600;
    padding: 0 5px 0 0;
    text-align: right;
}

.letter-vowel {
    background: var(--o1);
}

.letter-rare {
    background: var(--v1);
}

.letter-croatian {
    background: var(--b2);
}

.letter-basic {
    background: var(--y1);
}

.layout-toggle-btn {
    background: var(--g1);
    color: var(--b0);
    font-size: 0.66em;
}

.group-toggle-btn {
    background: var(--g1);
    color: var(--b0);
    font-size: 0.66em;
}

.palette-toggle-btn {
    background: var(--g1);
    color: var(--b0);
    font-size: 0.66em;
}

.keyboard-control {
    padding-right: 5px;
    width: auto;
}

.control-row-start {
    grid-column: 10;
}

.group-toggle-btn {
    grid-column: 11;
}

.palette-toggle-btn {
    grid-column: 12;
}

.group-vowels-start{
    grid-column-start: 6;
}
.group-croatian-start{
    grid-column-start: 1;
}
.group-english-start {
    grid-column-start: 6;
}

.qwerty-row2-start {
    grid-column-start: 1;
}

.qwerty-row3-start {
    grid-column-start: 3;
}

.letter-btn:hover:not(:disabled) {
    background: var(--w0);
    color: var(--b0);
}

.letter-btn:disabled {
    background: #AAAAAA !important;
    color: var(--g1) !important;
    cursor: not-allowed;
    filter: grayscale(1) brightness(0.78);
    pointer-events: none;
}

.letter-btn.used-correct:disabled {
    background: #003300 !important;
    color: var(--g1) !important;
    filter: grayscale(0) brightness(0.9);
}

.letter-btn.used-wrong:disabled {
    background: #330000 !important;
    color: var(--g1) !important;
    filter: grayscale(0) brightness(0.82);
}

.status-message {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    background-color: var(--b0) !important;
    overflow: hidden;
    padding: 0 178px 0 12px;
    box-sizing: border-box;
    text-align: left;
    justify-content: flex-start;
    font-size: 1.08em;
    font-weight: 600;
    line-height: 1.15;
}

.keyboard:hover {
    background-color: var(--b0) !important;
}

.status-message:hover {
    background-color: var(--b0) !important;
}

.msg-waiting {
    color: var(--b1);
}

.msg-success {
    color: var(--o1);
}

.msg-fail {
    color: var(--r3);
}

.game-over-btn {
    position: absolute;
    right: 8px;
    bottom: 4px;
    width: 160px;
    height: 44px;
    line-height: normal;
    margin: 0;
    padding-top: 9px;
    padding-right: 18px;
    text-align: right;
    font-size: 1em;
}

.a20 {
    grid-area: 3 / 5 / span 2 / span 2;
    padding-top: 5px !important;
    position: relative;
    z-index: 200;
}

#stats {
    top: 20px;
    height: 480px;
    width: calc(100% - 6px);
    margin-left: 5px;
    overflow: visible;
    border-top-width: 46px;
    border-left-width: 12px;
    border-bottom: 0 !important;
    border-top-left-radius: 50px;
    background-color: var(--y1) !important;
    z-index: 210;
    box-sizing: border-box;
}

#stats .stats-area {
    top: 20px;
    height: 435px;
    grid-template: repeat(4, 1fr) / repeat(3, 1fr);
    align-items: stretch;
    overflow: hidden;
    border-bottom: 0 !important;
    border-top-width: 0;
    margin-bottom: 0;
    background-color: var(--b0);
    box-sizing: border-box;
}

#stats > span {
    display: block;
    position: absolute;
    top: -39px !important;
    right: 8px;
    margin-right: 0 !important;
    line-height: 1;
    z-index: 220;
    color: var(--b0);
    font-size: 1.18em;
    font-weight: 800;
    letter-spacing: 0;
}

.a21 {
    grid-area: 5 / 2 / 5 / span 3;
    margin-left: -12px;
}

body.game-active .a21 {
    grid-area: 5 / 1 / 5 / span 4;
    margin-left: 31px;
}

body.game-active .b-block::before {
    content: "";
    display: block;
    width: 25px;
    height: 20px;
    background: inherit;
}

.stat-item {
    display: grid;
    grid-template-rows: 24px 1fr;
    align-items: center;
    min-width: 0;
    padding: 4px 5px 2px 2px;
}

.stat-item .l-stat {
    font-size: 1em;
    line-height: 1;
}

.stat-item .r-stat {
    font-size: 1.3em;
    line-height: 1;
}

.stat-item .l-stat,
.stat-item .r-stat {
    text-align: right;
    min-width: 0;
}

.keyboard-status-panel {
    position: relative;
    z-index: 1;
    top: 0;
    width: 100%;
    min-height: 56px;
    background-color: var(--b0);
    padding: 4px 8px 0 8px;
    box-sizing: border-box;
}

.part-reveal {
    animation: partReveal 260ms ease-out both;
}

.word-arrive {
    animation: wordArrive 650ms ease-out both;
}

.word-exit {
    animation: wordExit 620ms ease-in both;
}

.word-solved-blink {
    animation: solvedBlink 3s ease-in-out both;
}

.warp-transition {
    animation: warpPulse 650ms ease-in-out both;
}

@keyframes eyeBlink {
    0%,
    88%,
    94%,
    100% {
        transform: scaleY(1);
    }

    90%,
    92% {
        transform: scaleY(0.12);
    }
}

#settings_area,
#help_area,
#rang_area {
    position: relative;
    pointer-events: auto;
}

#settings_area {
    z-index: 260;
}

#help_area,
#rang_area {
    z-index: 260;
}

@keyframes partReveal {
    from {
        opacity: 0;
        filter: brightness(2);
    }

    to {
        opacity: 1;
        filter: brightness(1);
    }
}

@keyframes ropeDrift {
    0%,
    100% {
        transform: rotate(-7deg);
    }

    50% {
        transform: rotate(7deg);
    }
}

@keyframes bodySwing {
    0%,
    100% {
        transform: rotate(-7deg);
    }

    50% {
        transform: rotate(7deg);
    }
}

@keyframes introPulse {
    0%,
    100% {
        opacity: 0.82;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.035);
    }
}

@keyframes wordArrive {
    from {
        opacity: 0;
        transform: translateY(-18px) scale(0.96);
        filter: brightness(2.4);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }
}

@keyframes wordExit {
    from {
        opacity: 1;
        transform: translateX(0);
        filter: brightness(1);
    }

    to {
        opacity: 0.25;
        transform: translateX(28px);
        filter: brightness(2.2);
    }
}

@keyframes solvedBlink {
    0%,
    32%,
    64%,
    100% {
        opacity: 1;
        filter: brightness(1);
    }

    16%,
    48%,
    80% {
        opacity: 0.18;
        filter: brightness(2.4);
    }
}

@keyframes warpPulse {
    0% {
        filter: brightness(1);
        transform: scale(1);
    }

    50% {
        filter: brightness(2.1);
        transform: scale(1.025);
    }

    100% {
        filter: brightness(1);
        transform: scale(1);
    }
}

.welcome-title {
    font-size: 1.25em;
    line-height: 1.1;
    width: 100%;
    text-align: center !important;
    white-space: nowrap;
    margin: 0 auto;
}

.que.a8 {
    grid-area: 3 / 2 / 3 / span 5;
    justify-content: center !important;
}

body.game-active .que.a8 {
    grid-area: 3 / 1 / 3 / span 4;
    width: 735px;
    margin-left: 31px;
}