@keyframes neave-anim {
            to {
                background-position: 0 400%
            }
        }

        @keyframes fade-anim {
            0% {
                opacity: 0
            }

            40% {
                opacity: 0
            }

            50% {
                opacity: 1
            }

            60% {
                opacity: 0
            }

            100% {
                opacity: 0
            }
        }

        @keyframes fade-mid-anim {
            0% {
                opacity: .5
            }

            40% {
                opacity: .5
            }

            50% {
                opacity: 1
            }

            60% {
                opacity: .5
            }

            100% {
                opacity: .5
            }
        }

        .neave {
            position: absolute;
            display: block;
            left: 15px;
            left: calc(15px + env(safe-area-inset-left));
            top: 15px;
            top: calc(15px + env(safe-area-inset-top));
            width: 44px;
            height: 44px;
            margin: 0;
            padding: 0;
            z-index: 100
        }

        .neave .title {
            display: none
        }

        .neave svg {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 100;
            border-radius: 50%;
            border: 2px solid #fff;
            margin: 0;
            padding: 0;
            box-sizing: content-box;
            pointer-events: none
        }

        .mobile .neave svg {
            animation: fade-mid-anim 5s infinite ease-in-out
        }

        .neave .disc {
            position: absolute;
            display: block;
            width: 44px;
            height: 44px;
            background-color: #9fc;
            background-image: linear-gradient(to bottom, #9fc 0%, #9cf 25%, #f9c 50%, #fc9 75%, #9fc 100%);
            background-size: 100% 400%;
            border-radius: 50%;
            pointer-events: none;
            animation: neave-anim 8s infinite linear;
            opacity: 0;
            will-change: opacity;
            transition: opacity .2s ease-out
        }

        .mobile .neave .disc {
            animation: neave-anim 8s infinite linear, fade-anim 5s infinite ease-in-out
        }

        body:not(.mobile) .neave:hover .disc {
            opacity: 1
        }

        .neave:active {
            margin-top: 1px
        }

        html {
            -moz-box-sizing: border-box;
            box-sizing: border-box
        }

        .neave {
            -moz-box-sizing: content-box;
            box-sizing: content-box
        }

        *,
        *:before,
        *:after {
            -moz-box-sizing: inherit;
            box-sizing: inherit
        }

        body {
            margin: 0;
            background-color: #000;
            color: #fff;
            font-family: sans-serif;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            text-size-adjust: 100%
        }

        a {
            color: #fff
        }

        .game {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 600px;
            height: 600px;
            margin-left: -300px;
            margin-top: -370px;
            -webkit-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            tap-highlight-color: transparent
        }

        .alt {
            display: none
        }

        .error {
            text-align: center;
            padding: 40px 20px;
            line-height: 1.5
        }

        .error a {
            color: #fff;
            text-decoration: underline
        }

        .board {
            width: 100%;
            height: 100%
        }

        @-webkit-keyframes border-blink {
            50% {
                border-color: #000
            }
        }

        @-moz-keyframes border-blink {
            50% {
                border-color: #000
            }
        }

        @keyframes border-blink {
            50% {
                border-color: #000
            }
        }

        @-webkit-keyframes blink {
            50% {
                visibility: hidden
            }
        }

        @-moz-keyframes blink {
            50% {
                visibility: hidden
            }
        }

        @keyframes blink {
            50% {
                visibility: hidden
            }
        }

        @-webkit-keyframes appear {
            from {
                -webkit-transform: scale(0.3);
                transform: scale(0.3)
            }

            to {
                -webkit-transform: scale(1);
                transform: scale(1)
            }
        }

        @-moz-keyframes appear {
            from {
                -moz-transform: scale(0.3);
                transform: scale(0.3)
            }

            to {
                -moz-transform: scale(1);
                transform: scale(1)
            }
        }

        @keyframes appear {
            from {
                transform: scale(0.3)
            }

            to {
                transform: scale(1)
            }
        }

        .square {
            float: left;
            width: 33.333333333%;
            height: 33.333333333%;
            border-width: 5px;
            border-color: #fff;
            -webkit-transition: background-color .1s;
            -moz-transition: background-color .1s;
            transition: background-color .1s;
            will-change: background-color, border-color;
            cursor: pointer
        }

        .square:focus {
            outline: 0;
            background-color: #333
        }

        .square.top {
            border-bottom-style: solid
        }

        .square.bottom {
            border-top-style: solid
        }

        .square.left {
            clear: both;
            border-right-style: solid
        }

        .square.right {
            border-left-style: solid
        }

        .square.right>div {
            margin-left: -5px
        }

        .square.bottom>div {
            margin-top: -5px
        }

        .board.tie .square {
            -webkit-animation: border-blink .3s steps(1) 3;
            -moz-animation: border-blink .3s steps(1) 3;
            animation: border-blink .3s steps(1) 3
        }

        .board .square>div {
            -webkit-transition: opacity .1s;
            -moz-transition: opacity .1s;
            transition: opacity .1s
        }

        .board.tie .square>div,
        .board.win .square:not(.win)>div {
            opacity: .5
        }

        .square.win>div {
            -webkit-animation: blink .3s steps(1) 3;
            -moz-animation: blink .3s steps(1) 3;
            animation: blink .3s steps(1) 3
        }

        .o {
            left: 16.666666667%;
            top: 16.666666667%;
            width: 66.666666667%;
            height: 66.666666667%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            border: 20px solid #fff
        }

        .x {
            width: 100%;
            height: 100%
        }

        .square .x,
        .square .o {
            position: relative;
            will-change: transform;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            -webkit-animation: appear .2s cubic-bezier(0.5, 1.8, 0.1, 1.1);
            -moz-animation: appear .2s cubic-bezier(0.5, 1.8, 0.1, 1.1);
            animation: appear .2s cubic-bezier(0.5, 1.8, 0.1, 1.1)
        }

        .x:before,
        .x:after {
            position: absolute;
            content: "";
            display: block;
            background-color: #fff;
            left: 90px;
            top: 20px;
            width: 20px;
            height: 160px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px
        }

        .x:before {
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            transform: rotate(-45deg)
        }

        .x:after {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            transform: rotate(45deg)
        }

        .restart {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
            background-color: rgba(0, 0, 0, 0)
        }

        .scores {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 600px;
            margin-left: -300px;
            margin-top: 280px;
            text-align: center;
            cursor: pointer;
            -webkit-user-select: none;
            user-select: none
        }

        .scores p {
            font: 20px "Raleway", sans-serif;
            font-weight: 400;
            text-transform: uppercase;
            line-height: 1;
            display: inline-block;
            margin: 0;
            padding: 0;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }

        .scores .swap {
            display: inline-block;
            vertical-align: top;
            width: 30px;
            height: 30px;
            margin: -5px -30px 0 0;
            opacity: .5;
            cursor: pointer;
            outline: 0;
            -webkit-transition: opacity .1s;
            -moz-transition: opacity .1s;
            transition: opacity .1s
        }

        body:not(.mobile) .scores:hover .swap {
            opacity: 1
        }

        body:not(.mobile) .scores:active .swap {
            opacity: .75
        }

        .scores .score {
            font-size: 50px;
            display: block;
            height: 60px;
            padding: 10px 0 0 0;
            will-change: transform;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }

        .scores .score.appear {
            -webkit-animation: appear .3s cubic-bezier(0.5, 4, 0.1, 1.1);
            -moz-animation: appear .3s cubic-bezier(0.5, 4, 0.1, 1.1);
            animation: appear .3s cubic-bezier(0.5, 4, 0.1, 1.1)
        }

        .scores .o {
            display: inline-block;
            width: 13px;
            height: 13px;
            border-width: 2px;
            margin: 1px;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }

        .scores .x {
            display: inline-block;
            width: 17px;
            height: 17px;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }

        .scores .x:before,
        .scores .x:after {
            left: 0;
            top: 2px;
            margin-left: 7px;
            width: 2px;
            height: 17px
        }

        .player1,
        .player2 {
            width: 230px;
            white-space: nowrap
        }

        .scores.p1 .p2 {
            display: none
        }

        .scores.p2 .p1 {
            display: none
        }

        .scores .turn {
            opacity: .5
        }

        .mute {
            position: absolute;
            width: 38px;
            height: 38px;
            right: 15px;
            right: calc(15px + env(safe-area-inset-right));
            top: 15px;
            top: calc(15px + env(safe-area-inset-top));
            opacity: .5;
            cursor: pointer;
            -webkit-user-select: none;
            user-select: none;
            -webkit-transition: opacity .1s;
            -moz-transition: opacity .1s;
            transition: opacity .1s
        }

        body:not(.mobile) .mute:hover {
            opacity: 1
        }

        .share {
            display: inline-block;
            vertical-align: top
        }

        .ad {
            outline: 1px solid #333;
            background-color: #333;
            overflow: hidden
        }

        /* .adsbygoogle {
            display: inline-block
        }

        .ad.skyscraper1,
        .ad.skyscraper2,
        .ad.skyscraper1 .adsbygoogle,
        .ad.skyscraper2 .adsbygoogle {
            width: 160px;
            height: 600px
        } */

        .ad.skyscraper1 {
            position: absolute;
            top: 50%;
            margin-top: -300px;
            left: 0
        }

        .ad.skyscraper2 {
            position: absolute;
            top: 50%;
            margin-top: -300px;
            right: 0
        }

        /* .ad.mobile,
        .ad.mobile .adsbygoogle {
            display: block;
            width: 100%;
            height: 50px
        } */

        .ad.mobile {
            position: absolute;
            bottom: 0;
            bottom: env(safe-area-inset-bottom);
            width: 100%;
            margin: 0;
            overflow: hidden
        }

        /* .ad.mobile .adsbygoogle {
            margin: 0 auto
        } */

        .cookies {
            position: absolute;
            box-sizing: border-box;
            display: table;
            background-color: #fff;
            color: #000;
            width: 100%;
            bottom: 0;
            text-align: left;
            padding: 40px;
            padding-bottom: calc(40px + env(safe-area-inset-bottom));
            padding-left: calc(40px + env(safe-area-inset-left));
            padding-right: calc(40px + env(safe-area-inset-right));
            font-size: 17px;
            line-height: 1.3;
            user-select: none
        }

        .cookies p {
            display: table-cell;
            margin: 0;
            padding-right: 20px;
            vertical-align: top
        }

        .cookies a {
            color: #666;
            text-decoration: underline;
            white-space: nowrap
        }

        .cookies button {
            padding: 12px 20px;
            border: 0;
            font: inherit;
            font-weight: bold;
            color: #fff;
            background-color: #000;
            cursor: pointer;
            outline: 0;
            cursor: pointer;
            user-select: none;
            -webkit-touch-callout: none;
            -webkit-tap-highlight-color: transparent;
            border-radius: 6px;
            white-space: nowrap
        }

        body.cookies-consent .cookies {
            display: none
        }

        @media(min-width:1261px) {
            .ad.skyscraper1 {
                margin-left: 110px
            }

            .ad.skyscraper2 {
                margin-right: 110px
            }
        }

        @media(max-width:800px) and (min-height:661px) {
            .ad.skyscraper2 {
                display: none
            }
        }

        @media(max-height:800px) {

            .ad.skyscraper1,
            .ad.skyscraper2 {
                margin-top: -270px
            }
        }

        @media(max-height:660px) {

            .neave,
            .mute {
                display: none
            }

            .ad.skyscraper1,
            .ad.skyscraper2 {
                margin-top: -300px
            }
        }

        @media(max-width:960px), (max-height:800px) {
            .game {
                width: 450px;
                height: 450px;
                margin-left: -225px;
                margin-top: -280px
            }

            .square {
                border-width: 4px
            }

            .square.right>div {
                margin-left: -4px
            }

            .square.bottom>div {
                margin-top: -4px
            }

            .square .o {
                border-width: 15px
            }

            .square .x:before,
            .square .x:after {
                left: 67.5px;
                top: 16px;
                width: 15px;
                height: 118px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px
            }

            .scores {
                width: 450px;
                margin-left: -225px;
                margin-top: 210px
            }

            .scores p {
                font-size: 17px;
                letter-spacing: 0
            }

            .scores .score {
                font-size: 40px;
                padding-top: 8px;
                height: 50px
            }

            .scores .o {
                width: 12px;
                height: 12px;
                border-width: 2px;
                margin: 0 1px
            }

            .scores .x {
                width: 12px;
                height: 12px
            }

            .scores .x:before,
            .scores .x:after {
                top: 0;
                margin-left: 5px;
                width: 2px;
                height: 14px
            }

            .player1,
            .player2 {
                width: 180px
            }
        }

        @media(max-width:800px) {
            .ad.skyscraper2 {
                display: none
            }

            .mute {
                display: block
            }

            .game,
            .scores {
                margin-left: -150px
            }

            .mobile .game,
            .mobile .scores {
                margin-left: -225px
            }

            .ipad .game,
            .ipad .scores {
                margin-left: -150px
            }
        }

        @media(max-width:630px) {

            .ad.skyscraper1,
            .ad.skyscraper2 {
                display: none
            }

            .neave,
            .mute {
                display: block
            }

            .game,
            .scores {
                margin-left: -225px
            }

            .cookies {
                display: block;
                font-size: 15px;
                padding: 18px;
                padding-bottom: calc(18px + env(safe-area-inset-bottom));
                padding-left: calc(18px + env(safe-area-inset-left));
                padding-right: calc(18px + env(safe-area-inset-right))
            }

            .cookies p {
                display: block;
                padding-right: 0
            }

            .cookies button {
                display: block;
                width: 100%;
                margin-top: 18px
            }
        }

        @media(max-width:540px) {

            .ad.skyscraper1,
            .ad.skyscraper2 {
                display: none
            }

            .neave,
            .mute {
                display: block
            }
        }

        @media(max-width:540px), (max-height:630px) {
            .game {
                width: 300px;
                height: 300px;
                margin-left: -150px;
                margin-top: -205px
            }

            .mobile .game {
                margin-left: -150px;
                margin-top: -215px
            }

            .square {
                border-width: 3px
            }

            .square.right>div {
                margin-left: -3px
            }

            .square.bottom>div {
                margin-top: -3px
            }

            .square .o {
                border-width: 10px
            }

            .square .x:before,
            .square .x:after {
                left: 45px;
                top: 13px;
                width: 10px;
                height: 74px;
                -webkit-border-radius: 2px;
                -moz-border-radius: 2px;
                border-radius: 2px
            }

            .scores {
                width: 320px;
                margin-left: -160px;
                margin-top: 135px
            }

            .mobile .scores {
                margin-left: -160px;
                margin-top: 125px
            }

            .scores p {
                font-size: 15px
            }

            .scores .score {
                font-size: 25px;
                padding-top: 9px;
                height: 50px
            }

            .scores .o {
                width: 9px;
                height: 9px;
                margin: 0
            }

            .scores .x {
                width: 10px;
                height: 10px
            }

            .scores .x:before,
            .scores .x:after {
                margin-left: 4px;
                height: 11px
            }

            .player1,
            .player2 {
                width: 130px
            }

            .scores .swap svg {
                margin-bottom: -2px
            }
        }

        @media(max-height:520px) {

            .ad.mobile,
            .ad.skyscraper1,
            .ad.skyscraper2 {
                display: none
            }

            .neave,
            .mute {
                display: block
            }

            .mobile .game,
            .game {
                top: 60px;
                margin-top: 0
            }

            .mobile .scores,
            .scores {
                top: 380px;
                margin-top: 0;
                padding-bottom: 0
            }
        }

        @media(max-width:350px) {
            .scores .swap {
                display: none
            }
        }

        @media(min-width:421px) and (max-height:450px) {

            .mobile .game,
            .game {
                top: 10px
            }

            .mobile .scores,
            .scores {
                top: 320px
            }
        }