@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
    --maze-size: 500px;
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Press Start 2P';
    box-sizing: border-box;
}

body {
    background-color: black;
    color: #fff;
    min-height: 100vh;
    min-width: 100vw;
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas: 
        "header header header"
        ". main score"
        ". main controls";
}

#container {
    background-color: black;
}

.title {
    position: relative;
    bottom: 1rem;
    text-align: center;
    font-size: 2rem;
}


.game {
    margin-top: calc(50vh - 400px);
    border: solid 2px blue;
}

.start {
    position: fixed;
    top: 50%; 
    left: 50%; 
    transform: 
    translate(-50%, -50%); 
    background-color: #000000; 
    z-index: 1000; 
    cursor: pointer; 
    border-radius: 20px; 
    padding: 20px 30px; 
    display: flex; 
    align-items: center; 
    gap: 1em;
}

header h1 {font-size: 4em;}

main {
    grid-area: main;
    display: grid;
    align-items: center;
    justify-items: center;
    align-self: flex-start;
    position: relative;
}

main > .positioned-in-canvas {
    padding: 3rem;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.main-menu {
    display: grid;
    align-content: start
}

.main-menu > * {
    max-height: 5rem;
    margin: auto;
}

.guest-warning {
    position: absolute;
    text-align: center;
    justify-self: center;
    bottom: calc(0% + 2.5rem);
    font-size: small;
}

.main-grid {
    display: grid;
    grid-template-columns: 50% 50%;
    margin: auto 5%;
    
}

.main-grid > *:first-child {
    grid-column: span 2;    
}

.main-grid > * {
    margin: 0.5rem;
    padding: 1rem 0.5rem;
    text-align: center;
    border: solid blue 2px;
}
.main-grid > * > * {
    margin: 0.5rem 0px;
}

.button-size {
    max-height: 3rem;
}

.leaderboard {
    min-height: 0rem;
    display: grid;
    height: 10rem;
    align-content: start;
    overflow: scroll;
}
.leaderboard > * {
    display: grid;
    margin-left: 0.4rem;
    margin-bottom: 0.4rem;
    grid-template-columns: 3rem calc(100% - 19rem) 8rem 8rem;
    align-items: start;
}
.leaderboard-thisuser > * {
    color: blue;
}

.leaderboard-heading > *, .no-runs-message {
    color: rgb(143, 143, 143);
}

.leaderboard > * > * {
    text-align: left;
    margin: 0;
}
.no-runs-message {
    position: relative;
    top: -4rem;
    text-align: center;
}

.customisation {
    margin: 0rem 1.5rem;
    display: flex;
    columns: 2;
    box-sizing: border-box;
    min-height: 10rem;
}
.pacman-preview {
    min-width: 9rem;
    align-content: center;
}

.pacman-preview > *, .pacman-preview > * > * {
    max-width: 7rem;
    margin: auto;
    aspect-ratio: 1/1;
}
.pacman-preview > * > * {
    background-color: yellow;
    clip-path: circle(50%);
}
.pacman-preview > * {
    background-color: black;
    clip-path: polygon(0px 0px, 100% 0px, 50% 50%, 100% 100%, 0% 100%);
}

.customisation-buttons {
    display: grid;
    padding: 0.5rem;
    padding-right: 0px;
    grid-template-columns: repeat(auto-fill, 2.5rem);
    gap: 4px;
    align-content: start;
    background-color: rgb(0, 0, 0);
    min-width: calc(100% - 9rem);
}

.customisation-buttons > * {
    --c: rgb(0, 255, 55);
    background-color: var(--c);
    --s: 2.5rem;
    max-width: var(--s);
    max-height: var(--s);
    min-width: var(--s);
    min-height: var(--s);
    border: 4px solid #a8a8a8;
}

.color-pick:hover:not(.color-pick:disabled) {
    background-color: var(--c);
    border: 4px solid rgb(223, 223, 223);
}
.color-pick:active:not(.color-pick:disabled) {
    background-color: var(--c);
    border: 3px solid rgb(168, 168, 168);
}
.color-pick:disabled {
    cursor: not-allowed;
    border-color: #777777;
}
.color-pick:disabled::after {
    content: "🔒";
    cursor: not-allowed;
    color: transparent;
    text-shadow: 0 0 0 #777777;
    font-size: 1.2rem;
    clip-path: circle(50%);
}

.color-pick:not(.color-pick:disabled).selected {
    border: 4px solid rgb(250, 250, 250);
}

.pause-menu {
    display: none;
}

.popup {
    display: flex;
    background-color: rgba(128, 128, 128, 0.5);
    max-height: 4rem;
    align-items: center;
    text-align: center;
    justify-content: center;
    margin-top: 200px !important;
    --p: 40%;
  transition: clip-path 0.5s linear;
  clip-path: polygon(
    0% 0%,
    0% 100%,
    50% 100%,
    50% 0%,
    50% 0%,
    50% 100%,
    100% 100%,
    100% 0%
  );
}

.popup.split-outer {
  clip-path: polygon(
    0% 0%,
    0% 100%,
    0% 100%,
    0% 0%,
    100% 0%,
    100% 100%,
    100% 100%,
    100% 0%
  );
    transition: clip-path 0.5s linear;
}
.popup.split-inner {
  clip-path: polygon(
    50% 0%,
    50% 100%,
    50% 100%,
    50% 0%,
    50% 0%,
    50% 100%,
    50% 100%,
    50% 0%
  );
    transition: clip-path 0.5s linear;
}

.hud {
    position: absolute;
    left: 0px;
    top: 0px;
    min-width: 19rem;
    min-height: 2.5rem;
    border-bottom: 2px solid blue;
    background-color: black;
}
.hud.right {
    border-left: 2px solid blue;
    right: 0px;
    left: auto;
    padding-top: 7px;
    text-align: center;
}
.hud.left {
    border-right: 2px solid blue;
    right: auto;
    left: 0px;
}
.hud > button {
    max-width: 2.5rem !important;
    max-height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    text-align: center;
}
.hud > button:hover:not(button:disabled) {
    background-color: rgb(0, 0, 71);
    border: 6px solid blue;
}
.hud > button:active:not(button:disabled) {
    background-color: rgb(0, 0, 24);
    border: 2px solid rgb(101, 99, 230);
}

.hud > span:not(.dot):not(.pac-icon) {
    position: relative;
    top: 2px;
}
.dot {
    position: relative;
    top: 1px;
    min-height: 1rem;
    min-width: 1rem;
    background-color: #fff;
    clip-path: circle(30%);
    color: #00000000;
}
.pac-icon {
    position: relative;
    top: 1px;
    min-height: 1rem;
    min-width: 1rem;
    background-color: #fffb00;
    clip-path: circle(50%);
    color: #00000000;
}

.hud-menu {
    position: absolute;
    left: 20px;
    top: 60px;
    display: none;
}
.hud-menu > * {
    margin-bottom: 0rem;
}

.hud-menu.shown {
    display: grid;
}


canvas {
    background-color: rgb(85, 85, 85);
    padding: auto;
}

/* Lives styling */
.lives { position: fixed; top: 0; right: 0; display: flex; align-items: center; margin: 0.5em;}
.lives li {list-style: none; background-color: yellow; width: 2em; height: 2em; border-radius: 100%; margin: 5px;}
.lives ul { display: flex;}
.score { grid-area: score;}

/*
.leaderboard { grid-area: leaderboard; display: none;}
.leaderboard ol { margin-left: 2.5em; margin-top: 1em; text-align: left;}
.leaderboard ol li { font-size: 0.85em; padding: 1em 0;}
.leaderboard, .score, .controls, header { text-align: center;}
.leaderboard, .score { height: 100%;}
*/
div h1 {font-size: 1.25em; text-decoration: underline;}

div p {margin: 0.5em; font-size: 2em;}

/* Directional button styling */
.controls {
    grid-area: controls;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas: 
        ". upArrow ."
        "leftArrow . rightArrow"
        ". downArrow .";
    width: 25vh;
    height: 25vh;
    margin: 1rem;
}

.controls > .active {
    background-color: rgb(0, 0, 199);
}
.controls > .active:active {
    background-color: rgb(0, 0, 199);
}
.controls > .active:hover {
    background-color: rgb(0, 0, 199);
}

.entry-button {
    background-color: rgb(0, 0, 51);
}

.entry {
    height: 100%;
    size: 100%;
    line-height: 100%;
    padding: 14px ;
    background-color: rgb(0, 0, 51);
    border: 2px solid rgb(21, 0, 143);
    color: white;
    transition: border 0.2s;
}
.entry:hover, .entry:focus {
    border-color: blue;
    outline: none;
}

#level-select {
    width: 100px;
}

#level-select-button {
    width: 250px;
}

button {
    background: rgb(0, 0, 0); 
    border: 2px solid rgb(21, 0, 143);
    color: inherit; 
    padding: 0; 
    cursor: pointer;
    transition: border 0.2s;
    min-height: 3rem;
    min-width: 15rem;
}
button:hover:not(button:disabled) {
    background-color: rgb(0, 0, 71);
    border: 8px solid blue;
}
button:active:not(button:disabled) {
    background-color: rgb(0, 0, 24);
    border: 3px solid rgb(101, 99, 230);
}
button:disabled {
    cursor: not-allowed;
    color: grey;
}




.controls-right > button {
    min-width: 3rem;
}
.controls-right > button:nth-child(1) {grid-area: leftArrow; }
.controls-right > button:nth-child(2) {grid-area: upArrow; }
.controls-right > button:nth-child(3) {grid-area: rightArrow; }
.controls-right > button:nth-child(4) {grid-area: downArrow; }


#live-server-message {
    position: absolute;
    right: 0px;
    bottom: 0px;
    top: 0px;
    left: 0px;
    background-color: black;
    text-align: center;
    padding-top: 20%;

    animation: noJsFadeIn 2s 1;
}
@keyframes noJsFadeIn { 
    0% {
        background-color: transparent;
        color: hsla(0, 0%, 0%, 0);
    }
    10% {
        background-color: transparent;
        color: hsla(0, 0%, 0%, 0);
    }
    100%{
        background-color: black;
        color: white;
    }
}