:root {
    --debug-borders: 1px;
    --background-color: #111;
    --background-play-color: black;
    --body-copy-color: white;
    --pieces-color: blue;
    --pacman-color: yellow;
    --blinky-color: red;
    --pinky-color: pink;
    --inky-color: cyan;
    --clyde-color: orange;

    --board-width: 1200px;
}

* {
    box-sizing: border-box;
    margin: 0;
    font-family: 'Press Start 2P', cursive;
    text-transform: uppercase;
}

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: var(--background-color);
    font-size: 24px;
    line-height: 1.3;
    color: var(--body-copy-color);
}

.container {
    border: var(--debug-borders) solid blue;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
}

.header {
    border: var(--debug-borders) solid green;
    width: var(--board-width);
    height: 10%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.score-container,
.high-score-container,
.info-container {
    width: 33.3%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.score-container {
    border: var(--debug-borders) solid red;
    align-items: flex-end;
    text-align: right;
}

.score-container div {
    margin-right: 10%;
}

.high-score-container {
    border: var(--debug-borders) solid yellow;
    text-align: center;
}

.info-container {
    border: var(--debug-borders) solid purple;
    align-items: center;
}

#little-ghost {
    display: none;
    height: 80%;
    background-size: 100%;
    background-position: center;
    width: 70px;
    height: 70px;
    transform: scaleX(-1);
    animation: blinky .2s linear infinite alternate;
}

@keyframes blink {
    0% { opacity: 0; }
    50% { opacity: 0 ;}
    51% { opacity: 1 ;}
    100% { opacity: 1 ;}
}

.play-container {
    width: var(--board-width);
    height: 100%;
    background-color: var(--background-play-color);
    border: var(--debug-borders) dotted orange;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: stretch;
}

.play-top {
    min-height: 150px;
    border: var(--debug-borders) solid blue;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: yellow;
}

.play-middle {
    min-height: 300px;
    flex-grow: 1;
    border: var(--debug-borders) dotted red;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.play-bottom {
    min-height: 150px;
    border: var(--debug-borders) solid green;
}

#pacman {
    height: 280px;
    width: 280px;
    background-position: center;
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    position: absolute;
    animation: chomp .1s linear infinite alternate;
}

@keyframes chomp {
    0%, 32% {background-image: url('images/pacman-closed.png');}
    33%, 65% {background-image: url('images/pacman-open.png');}
    66%, 100% {background-image: url('images/pacman-wide.png');}
}

#ghost {
    height: 280px;
    width: 280px;
    background-position: center;
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    position: absolute;
    left: 0;
    z-index: 2;
    animation: blinky .2s linear infinite alternate;
}

@keyframes blinky {
    0%, 49% {background-image: url('images/blinky1.png');}
    50%, 100% {background-image: url('images/blinky2.png');}
}

@keyframes pinky {
    0%, 49% {background-image: url('images/pinky1.png');}
    50%, 100% {background-image: url('images/pinky2.png');}
}

@keyframes inky {
    0%, 49% {background-image: url('images/inky1.png');}
    50%, 100% {background-image: url('images/inky2.png');}
}

@keyframes clyde {
    0%, 49% {background-image: url('images/clyde1.png');}
    50%, 100% {background-image: url('images/clyde2.png');}
}

#debug {
    display: none;
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: rgba(255, 255, 255, .7);
    color: black;
    padding: 5px;
    z-index: 10;
    width: 250px;
}

#debug * {
    font-family: Arial, Helvetica, sans-serif;
    text-transform: none;
    font-size: .7em;
}

.dot-container {
    width: 500px;
    height: 30px;
    /* border: var(--debug-borders) dotted red; */
    position: absolute;
    top: 45%;
    left: 0;
}

.dot {
    width: 20px;
    height: 20px;
    background-color: white;
    position: absolute;
    top: 50%;
}