.displaynone{
            display: none !important;
        }

        :root {
            --move-left-offset: -20px;
            --move-right-offset: 177px;
            --move-up-offset: 65px;

            --vline-top: 75px;
            --vline-left: 10px;
            --vline-height: 2.5px;
            --vline-width: 2px;
            --vline-color: #58a6ff;
        }

        * {
            box-sizing: border-box;
        }

        body {
            background-color: #0d1117;
            color: #fff;
            font-family: 'Pixelify Sans', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 250px;
            width: 250px;
            margin: 0;
        }

        .container {
            position: relative;
            width: 200px;
            height: 220px;
        }

        .key {
            position: absolute;
            width: 40px;
            height: 40px;
            background: #222;
            border: 2px solid #555;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.2s;
        }

        .key.active {
            background: #2f81f7;
            border-color: #58a6ff;
        }

        .key[data-key="W"] {
            top: 10px;
            left: 80px;
        }

        .key[data-key="A"] {
            top: 60px;
            left: 30px;
        }

        .key[data-key="S"] {
            top: 60px;
            left: 80px;
        }

        .key[data-key="D"] {
            top: 60px;
            left: 130px;
        }

        .label {
            position: absolute;
            font-size: 10px;
            color: #aaa;
            text-align: center;
        }

        .key[data-key="ArrowUp"] { top: 10px; left: 80px; }
        .key[data-key="ArrowLeft"] { top: 60px; left: 30px; }
        .key[data-key="ArrowDown"] { top: 60px; left: 80px; }
        .key[data-key="ArrowRight"] { top: 60px; left: 130px; }


        .label[data-key="W"] {
            top: -5px;
            left: 90px;
        }

        .label[data-key="A"] {
            top: var(--move-up-offset);
            left: var(--move-left-offset);
        }

        .label[data-key="S"] {
            top: 105px;
            left: 90px;
        }

        .label[data-key="D"] {
            top: 70px;
            left: var(--move-right-offset);
        }

        .line {
            position: absolute;
            background: #58a6ff;
            transform-origin: top left;
            height: 2px;
            transition: opacity 0.2s;
            opacity: 0.7;
        }

        #lineW {
            top: 20px;
            left: 100px;
            width: 15px;
            transform: rotate(270deg);
        }

        #lineA {
            top: 80px;
            left: 40px;
            width: 30px;
            transform: rotate(180deg);
        }

        #lineS {
            top: 90px;
            left: 102px;
            width: 15px;
            transform: rotate(90deg);
        }

        #lineD {
            top: 80px;
            left: 160px;
            width: 15px;
            transform: rotate(0deg);
        }

        #vline {
            opacity: 0.7;
            position: absolute;
            top: var(--vline-top);
            left: var(--vline-left);
            width: var(--vline-width);
            height: var(--vline-height);
            background: var(--vline-color);
        }

        .bottom-instructions {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
            font-size: 14px;
            color: #ddd;
            line-height: 1.2;
        }

        .bottom-key {
            display: inline-block;
            padding: 4px 8px;
            margin: 2px 4px;
            background: #222;
            border: 2px solid #555;
            border-radius: 6px;
            transition: 0.2s;
        }

        .bottom-key.active {
            background: #2f81f7;
            border-color: #58a6ff;
        }