canvas {
    cursor: default;
    outline: none;
}

body {
    background: radial-gradient(circle at 50% 20%, #35105d, #090510 65%);
    color: #fff;
    font-family: system-ui, sans-serif;
    margin: 0;
    min-height: 100vh;
}

.game-bar { height: 56px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; background: #090510dd; border-bottom: 1px solid #ffffff20; }
.game-bar a { color: #fff; font-weight: 800; text-decoration: none; }
#game-shell { min-height: calc(100vh - 56px); display: grid; place-items: center; position: relative; }
#embed-html { max-width: 100%; }
#loading { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; text-align: center; color: #cfc5de; }
#loading strong { color: #fff; font-size: 24px; }
#loading.hidden { display: none; }

p {
    text-align: center;
    color: #eeeeee;
}

a {
    text-align: center;
    color: #bbbbff;
}

.superdev {
    color: rgb(37,37,37);
    text-shadow: 0px 1px 1px rgba(250,250,250,0.1);
    font-size: 50pt;
    display: block;
    position: relative;
    text-decoration: none;
    background-color: rgb(83,87,93);
    box-shadow: 0px 3px 0px 0px rgb(34,34,34),
                0px 7px 10px 0px rgb(17,17,17),
                inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
                inset 0px -12px 35px 0px rgba(0, 0, 0, .5);
    width: 70px;
    height: 70px;
    border: 0;
    border-radius: 35px;
    text-align: center;
    line-height: 68px;
}

.superdev:active {
    box-shadow: 0px 0px 0px 0px rgb(34,34,34),
                0px 3px 7px 0px rgb(17,17,17),
                inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
                inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
    background-color: rgb(83,87,93);
    top: 3px;
    color: #fff;
    text-shadow: 0px 0px 3px rgb(250,250,250);
}

.superdev:hover {
    background-color: rgb(100,100,100);
}