/* dark */
:root, .dark {
    --blue-01: #01045b;    
    --blue-02: #393b80;    
    --blue-03: #2A26F3;
    --blue-04: #6264a4;
    --blue-05: #a9abff;

    --blue-ice-01: #2E86AB;
    --blue-ice-02: #5cbedef1;

    --white-01: #ffffff;
    --white-02: #D9FFF5;

    --grey-01: #1a1a1a;
    --grey-02: #91a0a7;
    --grey-03: #1a252a;

    --green-01: #1C2826;
    --green-02: #044040;
    --green-03: #309778;
    --green-04: #0C8200;

    --black-01: #000000;

    --bg: #1a1a1a;
    --panel: #000;
    --color: #f2f2f2;
}

/* light */
.light {
    --blue-01: #3366cc;
    --blue-02: #6699ff;
    --blue-03: #99ccff;
    --blue-04: #cce5ff;
    --blue-05: #e6f7ff;

    --blue-ice-01: #99ccff;
    --blue-ice-02: #cce5ff;

    --white-01: #a7bde3;
    --white-02: #7a7a7a;

    --grey-01: #9a9a9a;
    --grey-02: #666666;
    --grey-03: #999999;

    --green-01: #336633;
    --green-02: #66cc66;
    --green-03: #99ff99;
    --green-04: #ccffcc;

    --black-01: #000000;

    --bg: #9a9a9a;
    --panel: #f2f2f2;
    --color: #000;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;    
    -webkit-user-select: none;
}

body {
    background-color: var(--grey-01);
    overflow: hidden;
    font-family: 'Silkscreen', sans-serif, monospace;
}

.game-hero-section {
    width: 100%;
    height: 100vh;
    position: relative;
}

.game-container {
    position: relative;
    width: 350px;
    height: 200px;
    margin: 0px auto;    
    outline: 1px solid var(--blue-05);
    transform: scale(3) translateY(35%);
    overflow: hidden;
    top: 20px;
}

.game-player-container {
    position: relative;
    width: 440px;
    height: 203px;
    margin: 0px auto;    
    transform: scale(3) translateY(35%);
    top: -184px;    
}

.game-container canvas {
    image-rendering: pixelated;
}

.game-small-screen-warning {
    display: none;
}

.game-player-form-container {
    display: none;
}

.game-player-form-container a {
    position: absolute;
    right: 0;
    top: 0;
    font-size: .8rem;
    padding: 1px 5px;
    outline: 1px solid var(--blue-05);
    color: var(--white-01);
    background-color: var(--blue-04);
    text-decoration: none;
    transition: ease-in .3s;
    animation: blinking .5s infinite;
}

.game-player-form-container a:hover {
    transition: ease-in .3s;
    background-color: var(--blue-02);
}