@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');

html,
body {
    margin: 0;
}

body {
    height: 100vh;
    width: 100vw;
    background-color: #000000;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    overflow: hidden;
}

#board {
    background: #A37B73FF;
}

#controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4vw;
    margin-top: 1.5vh;
}

#controls.playing .play-button,
#controls.game-over .play-button {
    display: none;
}

#controls:not(.playing) .pause-button,
#controls:not(.playing) .resume-button {
    display: none;
}

#controls.paused .pause-button {
    display: none;
}

#controls:not(.paused) .resume-button {
    display: none;
}

#controls:not(.game-over) .restart-button {
    display: none;
}

#board {
    display: flex;
    flex-direction: column;
    height: 80vh;
    width: 80vw;
    border: 2px solid #000;
    margin: 1.5vh 10vw;
    position: relative;
}

div.row {
    flex: 1;
    display: flex;
    flex-direction: row;
}

div.col {
    flex: 1;
    /* border: 1px solid grey; */
}

div.col.snake {
    background: #ff4a32 !important;
}

div.col.food {
    border-radius: 50%;
}

#gameOver {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 1.5em;
    text-align: center;
    box-sizing: border-box;
    margin: 0;
}

.game-over-text {
    margin: 0;
}

#board.game-over div#gameOver {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* .row-0, .col-0, .row-59, .col-119 {
    background: #ac0909;
} */

/* cyberpunk button */
button,
button::after {
    width: 20vw;
    height: 5vh;
    font-size: 2em;
    font-family: 'Oswald', sans-serif;
    background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
    border: 0;
    color: #fff;
    letter-spacing: 3px;
    line-height: 1em;
    box-shadow: 6px 0px 0px #00E6F6;
    outline: transparent;
    position: relative;
}

button::after {
    --slice-0: inset(50% 50% 50% 50%);
    --slice-1: inset(80% -6px 0 0);
    --slice-2: inset(50% -6px 30% 0);
    --slice-3: inset(10% -6px 85% 0);
    --slice-4: inset(40% -6px 43% 0);
    --slice-5: inset(80% -6px 5% 0);

    content: 'HOWBOUT';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #373435 5%);
    text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
    clip-path: var(--slice-0);
}

button:hover {
    cursor: pointer;
}

.score-button:hover {
    cursor: auto;
}

.score-button {
    background: linear-gradient(45deg, transparent 5%, #00E6F6 5%);
    box-shadow: 6px 0px 0px #FF013C;
}

.set-difficulty {
    background: linear-gradient(45deg, transparent 5%, #eeb108 5%);
    box-shadow: 6px 0px 0px rgb(105, 235, 6);
}

.leaderboard-btn {
    background: linear-gradient(45deg, transparent 5%, #0845EE 5%);
    box-shadow: 6px 0px 0px rgb(1, 35, 144);
}

#easy {
    background: linear-gradient(45deg, transparent 5%, #13c51f 5%);
    box-shadow: 6px 0px 0px #889b2c;
}

#medium {
    background: linear-gradient(45deg, transparent 5%, #1354c5 5%);
    box-shadow: 6px 0px 0px #4327d1;
}

#hard {
    background: linear-gradient(45deg, transparent 5%, #8d13c5 5%);
    box-shadow: 6px 0px 0px #4a1264;
}

#submit-score-button {
    background: #009EFF;
    font-size: 1.5em;
    margin-top: 2vh;
}

button:hover::after {
    animation: 1.5s glitch;
    animation-timing-function: steps(2, end);
}

@keyframes glitch {
    0% {
        clip-path: var(--slice-1);
        transform: translate(-20px, -10px);
    }

    10% {
        clip-path: var(--slice-3);
        transform: translate(10px, 10px);
    }

    20% {
        clip-path: var(--slice-1);
        transform: translate(-10px, 10px);
    }

    30% {
        clip-path: var(--slice-3);
        transform: translate(0px, 5px);
    }

    40% {
        clip-path: var(--slice-2);
        transform: translate(-5px, 0px);
    }

    50% {
        clip-path: var(--slice-3);
        transform: translate(5px, 0px);
    }

    60% {
        clip-path: var(--slice-4);
        transform: translate(5px, 10px);
    }

    70% {
        clip-path: var(--slice-2);
        transform: translate(-10px, 10px);
    }

    80% {
        clip-path: var(--slice-5);
        transform: translate(20px, -10px);
    }

    90% {
        clip-path: var(--slice-1);
        transform: translate(-10px, 0px);
    }

    100% {
        clip-path: var(--slice-1);
        transform: translate(0);
    }
}

/* Difficulty and Instructions Modal */
#bg-modal1 {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    z-index: 1;
}

.difficulty-buttons {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    gap: 2vh;
}

.instructions {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    top: 20%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    font-size: 2em;
}

.how-to-play {
    margin-bottom: 0.5vh;
}

/* Submit Score Form Modal */
#bg-modal2 {
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    z-index: 1;
    justify-content: center;
    align-items: center;
    color: black;
}

.container {
    width: 40vw;
    height: 30vh;
    padding: 30px 50px;
    background-color: #FEFBF6;
    border-radius: 5px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
}

.container h1 {
    margin: 0;
    text-align: center;
    border-bottom-style: solid;
    border-bottom-color: lightgrey;
}

#username {
    width: 90%;
    height: 46px;
    border-radius: 30px;
    padding-left: 20px;
    border: 1px solid rgb(118, 118, 118);
    margin-top: 1vh;
}

.close {
    margin-left: 0.5vw;
    transform: rotate(45deg);
    font-size: 2vw;
}

#searchForm {
    margin-top: 2vh;
}

.container button {
    margin-top: 4vh;
    margin: auto;
}

.icon {
    font-size: 1.2em;
}

.response {
    text-align: center;
    font-size: 1.5em;
}

/* Leaderboard css*/
.title {
    text-align: center;
    font-weight: 600;
    font-size: 4rem;
    background-color: #FF7500;
    margin: 0;
    margin-bottom: 4vh;
    padding: 0;
}

.leaderboard-table {
    max-width: 50rem;
    margin: auto;
    border-radius: 8px;
    border: 1px solid white;
}

.table-title {
    background-color: #DF362D;
    font-size: 3em;
    margin: 0;
    padding: 0;
    text-align: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

table {
    width: 100%;
}

thead {
    font-size: 1.5em;
    color: rgb(154, 154, 154);
    background-color: #1f232c;
    margin: auto;
    padding-bottom: 40px;

}

tbody .username {
    font-weight: 500;
}

.rank,
.username,
.score,
.date {
    text-align: center;
}

.rank {
    color: rgb(154, 154, 154);
}

th {
    padding: 1rem 1rem 0;
    font-size: 1.23em;
}

td {
    font-size: 1.5em;
}

tbody {
    background-color: #0d0f12;
}

.go-back {
    margin-top: 6vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scrolling {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

/* Visual refresh and motion layer */
:root {
    --bg-1: #08121f;
    --bg-2: #1a1035;
    --accent-1: #ff6a00;
    --accent-2: #00d2ff;
    --accent-3: #b2ff59;
    --glass: rgba(6, 14, 24, 0.7);
}

body {
    background: radial-gradient(circle at 10% 10%, #1f2e54 0%, transparent 35%),
        radial-gradient(circle at 85% 15%, #3c1859 0%, transparent 30%),
        linear-gradient(135deg, var(--bg-1), #090e19 45%, var(--bg-2));
    position: relative;
}

body::before,
body::after {
    content: '';
    position: fixed;
    inset: -10%;
    pointer-events: none;
}

body::before {
    background: conic-gradient(from 160deg, rgba(255, 106, 0, 0.15), rgba(0, 210, 255, 0.1), rgba(178, 255, 89, 0.12), rgba(255, 106, 0, 0.15));
    filter: blur(36px);
    animation: skyDrift 16s linear infinite;
}

body::after {
    background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 36px 36px;
    opacity: 0.35;
}

#board {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    animation: boardEnter 700ms ease-out;
    overflow: hidden;
}

#controls {
    background: var(--glass);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    margin: 1.8vh 8vw 0;
    padding: 1rem;
    backdrop-filter: blur(8px);
    animation: floatIn 800ms ease-out;
}

button {
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

button:hover {
    transform: translateY(-2px) scale(1.015);
    filter: brightness(1.07);
}

button:active {
    transform: translateY(0) scale(0.99);
}

.play-button {
    animation: pulsePlay 2s ease-in-out infinite;
}

#bg-modal1 {
    backdrop-filter: blur(5px);
}

.instructions {
    background: rgba(11, 19, 33, 0.72);
    width: min(92vw, 900px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 0.5rem 1.2rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    animation: floatIn 600ms ease-out;
}

.instructions ul {
    margin-top: 0.3rem;
}

.space-start-tip {
    color: #ffd36b;
    text-shadow: 0 0 14px rgba(255, 211, 107, 0.4);
    animation: hintBlink 1.8s ease-in-out infinite;
}

.leaderboard-table {
    background: rgba(9, 15, 26, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.title,
.table-title {
    letter-spacing: 0.08em;
}

tbody tr {
    transition: background-color 160ms ease, transform 160ms ease;
}

tbody tr:hover {
    background-color: rgba(0, 210, 255, 0.08);
    transform: translateX(4px);
}

div.col.snake {
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.35);
    animation: snakePulse 900ms ease-in-out infinite;
}

div.col.food {
    animation: foodGlow 800ms ease-in-out infinite alternate;
}

@keyframes skyDrift {
    from {
        transform: rotate(0deg) scale(1.05);
    }

    to {
        transform: rotate(360deg) scale(1.1);
    }
}

@keyframes boardEnter {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

@keyframes pulsePlay {
    0%,
    100% {
        box-shadow: 6px 0 0 #00E6F6;
    }

    50% {
        box-shadow: 6px 0 0 #00E6F6, 0 0 20px rgba(0, 230, 246, 0.5);
    }
}

@keyframes hintBlink {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.62;
    }
}

@keyframes snakePulse {
    0%,
    100% {
        filter: saturate(1);
    }

    50% {
        filter: saturate(1.25);
    }
}

@keyframes foodGlow {
    from {
        box-shadow: 0 0 0 rgba(255, 255, 255, 0.2);
    }

    to {
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
    }
}

@media (max-width: 980px) {
    #controls {
        flex-wrap: wrap;
        gap: 0.8rem;
        margin: 1vh 3vw 0;
        padding: 0.8rem;
    }

    button,
    button::after {
        width: 38vw;
        height: 4.5vh;
        font-size: 1.1rem;
        letter-spacing: 1px;
    }

    #board {
        width: 94vw;
        margin: 1vh 3vw;
    }

    .instructions {
        font-size: 1.2rem;
    }
}