/* Super Tic-Tac-Toe Styles
 * Copyright (c) 2024, 7th software
 * All rights reserved.
 */

/* Global scope CSS variables should be declared within the :root selector */
:root {
    --bg-image: url(https://images.unsplash.com/photo-1541004610042-8d31ca3fdf87);

    --super-border: 5px solid rgba(255, 255, 255, 0.0);

    --board-cell-bg: rgba(255, 255, 255, 0.8);
    --board-border: 5px solid rgba(255, 255, 255, 0.3);

    --active-border: 5px solid red;

    --progress-bg: rgb(128, 128, 128);
    --progress-fg: rgb(76, 175, 80);

    --move-opacity: 0.8;
    --game-over-opacity: 0.6;

    --draw-board-bg: rgb(0, 0, 0);
    --draw-cell-bg: rgb(224, 224, 224);

    --bg-green: rgb(112, 226, 112);
    --fg-green: rgb(0, 16, 0);

    --bg-cyan: rgb(112, 226, 226);
    --fg-cyan: rgb(0, 32, 32);

    --bg-yellow: rgb(226, 226, 112);
    --fg-yellow: rgb(32, 32, 0);

    --bg-light: rgb(226, 226, 226);
    --fg-light: rgb(48, 48, 48);

    --bg-blue: rgb(112, 112, 226);
    --fg-blue: rgb(12, 12, 26);

    --bg-red: rgb(226, 112, 112);
    --fg-red: rgb(32, 8, 8);

    --bg-pink: rgb(226, 164, 226);
    --fg-pink: rgb(48, 16, 48);

    --bg-dark: rgb(64, 64, 64);
    --fg-dark: rgb(24, 24, 24);
}

body {
    margin: 0;
    background: var(--bg-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;

    font-family: 'Source Sans Pro', sans-serif;
}

body.player-X {
    background: linear-gradient(to left,
        var(--x-gradient-start) 0%,
        var(--x-gradient-stop) 67%),
        var(--bg-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
}

body.player-O {
    background: linear-gradient(to left,
        var(--o-gradient-start) 0%,
        var(--o-gradient-stop) 67%),
        var(--bg-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100vw;
    height: 100vh; /* Full height of the viewport */
    overflow: hidden; /* Prevent scrolling */
}

.button-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.menu-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-container {
    display: flex;
    align-items: center;
    justify-content: center; /* Horizontally center content */
    overflow: hidden; /* Ensure content doesn't overflow */
}

/* Optional: Add some content and styles for illustration purposes */
.content {
}

.content.blur {
    padding: 0.5vw;
    backdrop-filter: blur(10px); /* Adjust the blur amount as needed */
    background-color: rgba(0,0,0,0.15);
    border-radius: 3vmin;
    box-shadow: 10px 5px 5px rgba(0,0,0,0.3);
}


h1 {
    color: #fff;
    text-shadow: 0 0 8px #000, 0 0 16px #fff, 0 0 24px #aaa;
}

h2 {
    color: #eee;
    text-shadow: 0 0 4px #000, 0 0 12px #ddd, 0 0 16px #999;
}

p {
    margin: 0;
    padding: 2px;
    color: #eee;
    text-shadow: 0 0 3px #000, 0 0 6px #aaa, 0 0 9px #777;
}

button {
    width: 8vh;
    height: 8vh;
    aspect-radio: 1/1;
    margin: 3px;
    border: 2px solid black;
    font-family: 'Lucida Sans Unicode', 'Source Sans Pro', sans-serif;
    font-weight: bold;
    font-size: 5vh;
    color: #000;
    text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 9px #fff;
}

button.active {
    border: 2px solid red;
}

#menu {
    background-image: url('images/menu.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Style for the super grid */
.super-game {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    border: var(--super-border); /* Border around the entire active board */
}

.super-game.active {
    animation-name: play-border;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    animation-timing-function: ease;
}

/* Style for individual game boards */
.board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;                 /* Gap between cells within the board */
    align-items: center;

    border: var(--board-border);   /* Border around the entire active board */
    transition: background-color 250ms linear;
}

.board.active {
    animation-name: play-border;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    animation-timing-function: ease;
}

/* Border pulses to this colour when active */
@keyframes play-border {
    to {
        border: var(--active-border); /* Border around the entire active board */
    }
}

/* Style for individual cells in the boards */
.cell {
    margin: 0;
    padding: 0;
    width: 3.5vw;
    height: 3.5vw;
    font-size: 3.5vw;
    aspect-ratio: 1;

    display: flex; /* Added display: flex; */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    text-align: center;

    text-shadow: 0 0 6px #fff, 0 0 10px #ddd;

    cursor: pointer;
    background-color: var(--board-cell-bg);
    border: 1px solid black; /* Border around each cell */
    transition: background-color 200ms linear;
}

.progress-bar-container {
    width: 33vw; /* Adjust the width of the progress bar container */
    height: 4vh; /* Adjust the height of the progress bar container */
    background-color: var(--progress-bg); /* Background color of the progress bar container */
    border-radius: 5px; /* Optional: Add rounded corners to the container */
    border: 2px solid black;
    overflow: hidden; /* Ensure the progress bar doesn't overflow */
}

.progress-bar {
    height: 100%;
    width: 100%; /* Initial width of the progress bar */
    background-color: var(--progress-fg); /* Color of the progress bar */
    transition: width 20s linear; /* Transition the width over 20 seconds with linear timing */
}

/* Media query for portrait orientation */
@media (orientation: portrait) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 3fr;
    }

    .menu-container {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .game-container {
        display: flex;
        justify-content: center; /* Horizontally center content */
        align-items: center;
        overflow: hidden; /* Ensure content doesn't overflow */
    }

    button {
        width: 15vw;
    }

    .cell {
        width: 3.5vh;
        height: 3.5vh;
        font-size: 3.5vh;
    }

    .progress-bar-container {
        width: 66vw; /* Adjust the width of the progress bar container */
        height: 3vh; /* Adjust the height of the progress bar container */
        margin: 0 auto; /* Center the div horizontally */
    }
}

#overlay {
    z-index: 10; /* Ensure the overlay is on top */
    overflow: visible;

    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(128, 128, 128, 0.5); /* Adjust the color and transparency as needed */
    backdrop-filter: blur(3px); /* Adjust the blur amount as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
}

#reload-check,
#game-result {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    padding: 5px;
    margin: 5px;

    text-align: center;
    justify-content: center;

    background-color: rgb(16, 64, 24);

    border: 5px solid black;
    border-radius: 1.5vw;

    min-width: 30%;
    /*min-height: 20vh;*/
    opacity: 0.7;

    visibility: hidden;
}

#reload-check button,
#game-result button {
    background-color: rgb(64, 128, 96);

    width: auto;
    height: auto;
    min-width: 40%;

    aspect-ratio: auto;
    padding-left: 1vw;
    padding-right: 1vw;

    border: 2px solid rgb(64, 225, 64);
    border-radius: 0.5vw;

    font-family: 'Lucida Sans Unicode', 'Source Sans Pro', sans-serif;
    font-weight: bold;
    font-size: 1.5em;

    color: #fff;
    text-shadow: 0 0 3px #050, 0 0 6px #fff, 0 0 9px #fff;
}

.cell.player-X {
    color: var(--x-cell-fg);
    background-color: var(--x-cell-bg);
    opacity: var(--move-opacity);
}

.cell.player-O {
    color: var(--o-cell-fg);
    background-color: var(--o-cell-bg);
    opacity: var(--move-opacity);
}

.cell.winner-X {
    background-color: var(--x-win-cell-bg);
    color: var(--x-win-cell-fg);
    font-weight: bold;
}

.cell.winner-O {
    background-color: var(--o-win-cell-bg);
    color: var(--o-win-cell-fg);
    font-weight: bold;
}

.cell.drawn {
    background-color: var(--draw-cell-bg);
    opacity: var(--game-over-opacity);
}

.board.winner-X {
    background-color: var(--x-win-board-bg);
    opacity: var(--game-over-opacity);
}

.board.winner-O {
    background-color: var(--o-win-board-bg);
    opacity: var(--game-over-opacity);
}

.board.drawn {
    background-color: var(--draw-board-bg);
    opacity: var(--game-over-opacity);
}

.board.glow-X {
    box-shadow: var(--x-win-board-glow-1), var(--x-win-board-glow-2), var(--x-win-board-glow-3);
}

.board.glow-O {
    box-shadow: var(--o-win-board-glow-1), var(--o-win-board-glow-2), var(--o-win-board-glow-3);
}

.stopwatch {
    background-image: url('images/stopwatch.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 9px #fff;
}

.stopwatch.notimeout {
    background-color: #bcf;
}

.stopwatch.s20 {
    background-color: #bfc;
}

.stopwatch.s10 {
    background-color: #ffc;
}

.stopwatch.s5 {
    background-color: #fbc;
}

.stopwatch.s2 {
    background-color: #f79;
}

.player {
}

.player.human {
    background-image: url('images/human.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.player.bot1 {
    background-image: url('images/blunder-bot.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.player.bot2 {
    background-image: url('images/junior-bot.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.player.bot3 {
    background-image: url('images/brainy-bot.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#resize {
    background-image: url('images/resize.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#mute {
    background-image: url('images/mute.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#reload {
    background-image: url('images/reload.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.theme-light {
    background-color: var(--bg-light);
    color: var(--fg-light);
}

.theme-dark {
    background-color: var(--bg-dark);
    color: var(--fg-dark);
}

.theme-green {
    background-color: var(--bg-green);
    color: var(--fg-green);
}

.theme-blue {
    background-color: var(--bg-blue);
    color: var(--fg-blue);
}

.theme-yellow {
    background-color: var(--bg-yellow);
    color: var(--fg-yellow);
}

.theme-red {
    background-color: var(--bg-red);
    color: var(--fg-red);
}

.theme-cyan {
    background-color: var(--bg-cyan);
    color: var(--fg-cyan);
}

.theme-pink {
    background-color: var(--bg-pink);
    color: var(--fg-pink);
}

.x-theme-light {
    --x-gradient-start: rgba(200, 200, 200, 0.8);
    --x-gradient-stop: rgba(200, 200, 200, 0.0);
    --x-cell-bg: var(--bg-light);
    --x-cell-fg: var(--fg-light);
    --x-win-cell-bg: rgb(192, 192, 192);
    --x-win-cell-fg: rgb(0, 0, 0);
    --x-win-board-bg: rgb(224, 224, 224);
    --x-win-board-glow-1: 0 0 60px 8px rgb(255, 255, 255);
    --x-win-board-glow-2: 0 0 100px 16px rgb(148, 148, 148);
    --x-win-board-glow-3: 0 0 140px 24px rgb(88, 88, 88);
}

.o-theme-dark {
    --o-gradient-start: rgba(32, 32, 32, 0.8);
    --o-gradient-stop: rgba(32, 32, 32, 0.0);
    --o-cell-bg: var(--bg-dark);
    --o-cell-fg: var(--fg-dark);
    --o-win-cell-bg: rgb(48, 48, 48);
    --o-win-cell-fg: rgb(212, 212, 212);
    --o-win-board-bg: rgb(32, 32, 32);
    --o-win-board-glow-1: 0 0 60px 8px rgb(32, 32, 32);
    --o-win-board-glow-2: 0 0 100px 16px rgb(24, 24, 24);
    --o-win-board-glow-3: 0 0 140px 24px rgb(16, 16, 16);
}

.x-theme-green {
    --x-gradient-start: rgba(96, 200, 96, 0.8);
    --x-gradient-stop: rgba(96, 200, 96, 0.0);
    --x-cell-bg: var(--bg-green);
    --x-cell-fg: var(--fg-green);
    --x-win-cell-bg: rgb(64, 192, 64);
    --x-win-cell-fg: rgb(0, 64, 0);
    --x-win-board-bg: rgb(96, 224, 96);
    --x-win-board-glow-1: 0 0 60px 8px rgb(96, 255, 96);
    --x-win-board-glow-2: 0 0 100px 16px rgb(64, 148, 64);
    --x-win-board-glow-3: 0 0 140px 24px rgb(24, 88, 24);
}

.o-theme-blue {
    --o-gradient-start: rgba(96, 96, 200, 0.8);
    --o-gradient-stop: rgba(96, 96, 200, 0.0);
    --o-cell-bg: var(--bg-blue);
    --o-cell-fg: var(--fg-blue);
    --o-win-cell-bg: rgb(64, 64, 192);
    --o-win-cell-fg: rgb(0, 0, 96);
    --o-win-board-bg: rgb(96, 96, 224);
    --o-win-board-glow-1: 0 0 60px 8px rgb(96, 96, 255);
    --o-win-board-glow-2: 0 0 100px 16px rgb(64, 64, 148);
    --o-win-board-glow-3: 0 0 140px 24px rgb(24, 24, 88);
}

.x-theme-yellow {
    --x-gradient-start: rgba(200, 200, 96, 0.8);
    --x-gradient-stop: rgba(200, 200, 96, 0.0);
    --x-cell-bg: var(--bg-yellow);
    --x-cell-fg: var(--fg-yellow);
    --x-win-cell-bg: rgb(192, 192, 64);
    --x-win-cell-fg: rgb(64, 64, 0);
    --x-win-board-bg: rgb(224, 224, 96);
    --x-win-board-glow-1: 0 0 60px 8px rgb(255, 255, 96);
    --x-win-board-glow-2: 0 0 100px 16px rgb(148, 148, 64);
    --x-win-board-glow-3: 0 0 140px 24px rgb(88, 88, 24);
}

.o-theme-red {
    --o-gradient-start: rgba(200, 96, 96, 0.8);
    --o-gradient-stop: rgba(200, 96, 96, 0.0);
    --o-cell-bg: var(--bg-red);
    --o-cell-fg: var(--fg-red);
    --o-win-cell-bg: rgb(192, 64, 64);
    --o-win-cell-fg: rgb(48, 16, 16);
    --o-win-board-bg: rgb(224, 96, 96);
    --o-win-board-glow-1: 0 0 60px 8px rgb(255, 96, 96);
    --o-win-board-glow-2: 0 0 100px 16px rgb(148, 64, 64);
    --o-win-board-glow-3: 0 0 140px 24px rgb(88, 24, 24);
}

.x-theme-cyan {
    --x-gradient-start: rgba(96, 200, 200, 0.8);
    --x-gradient-stop: rgba(96, 200, 200, 0.0);
    --x-cell-bg: var(--bg-cyan);
    --x-cell-fg: var(--fg-cyan);
    --x-win-cell-bg: rgb(64, 192, 192);
    --x-win-cell-fg: rgb(0, 64, 64);
    --x-win-board-bg: rgb(96, 224, 224);
    --x-win-board-glow-1: 0 0 60px 8px rgb(96, 255, 255);
    --x-win-board-glow-2: 0 0 100px 16px rgb(64, 148, 148);
    --x-win-board-glow-3: 0 0 140px 24px rgb(24, 88, 88);
}

.o-theme-pink {
    --o-gradient-start: rgba(200, 96, 200, 0.8);
    --o-gradient-stop: rgba(200, 96, 200, 0.0);
    --o-cell-bg: var(--bg-pink);
    --o-cell-fg: var(--fg-pink);
    --o-win-cell-bg: rgb(192, 96, 192);
    --o-win-cell-fg: rgb(0, 0, 0);
    --o-win-board-bg: rgb(224, 164, 224);
    --o-win-board-glow-1: 0 0 60px 8px rgb(255, 200, 255);
    --o-win-board-glow-2: 0 0 100px 16px rgb(148, 96, 148);
    --o-win-board-glow-3: 0 0 140px 24px rgb(88, 52, 88);
}