:root {
    --ball-size: 7vmin;
}

h1 {
    font-size: 20px;
    line-height: 1.5em;
    font-family: sans-serif;
    padding: 0;
    margin: 0 0 0.3em 0;
}

.wrapper {
    width: calc(var(--ball-size) * 1.3 * 9);
    margin: 0 auto;
}

.status {
    padding: 5px;
}

#restart {
    margin: 0 5px;
}

.field {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    column-gap: 0;
    row-gap: 0;
    white-space-collapse: collapse;
}

.field > div {
    width: calc(var(--ball-size) * 1.2);
    height: calc(var(--ball-size) * 1.2);
    text-align: center;
    background-color: #eee;
    box-sizing: content-box;
    border: calc(var(--ball-size) * 0.05) solid #f5f5f5;
    border-right-color: #ccc;
    border-bottom-color: #ccc;
    padding: 0;
    margin: 0;
    position: relative;
}

.cell.highlight {
    background-color: #eee9c3;
}

.ball::after {
    content: ' ';
    position: absolute;
    left: calc(0.2 * var(--ball-size) / 2);
    top: calc(0.05 * var(--ball-size));
    display: inline-block;
    background: black;
    border-radius: 50%;
    height: var(--ball-size);
    width: var(--ball-size);
    transform: translate(0, 5%);
    transform-origin: 50% 50%;
    transition: all 0.3s;
}

.ball.empty::after {
    visibility: hidden;
}

.ball.red::after {
    background: radial-gradient(circle at calc(var(--ball-size) / 3) calc(var(--ball-size) / 3), #ff4747, #000);
}
.ball.orange::after {
    background: radial-gradient(circle at calc(var(--ball-size) / 3) calc(var(--ball-size) / 3), #ffbb33, #000);
}
.ball.yellow::after {
    background: radial-gradient(circle at calc(var(--ball-size) / 3) calc(var(--ball-size) / 3), #ffff45, #000);
}
.ball.green::after {
    background: radial-gradient(circle at calc(var(--ball-size) / 3) calc(var(--ball-size) / 3), #4dff79, #000);
}
.ball.blue::after {
    background: radial-gradient(circle at calc(var(--ball-size) / 3) calc(var(--ball-size) / 3), #5cabff, #000);
}
.ball.darkblue::after {
    background: radial-gradient(circle at calc(var(--ball-size) / 3) calc(var(--ball-size) / 3), #5e5eff, #000);
}
.ball.purple::after {
    background: radial-gradient(circle at calc(var(--ball-size) / 3) calc(var(--ball-size) / 3), #e45eff, #000);
}

.ball.small::after {
    transform: scale(0.33) translateY(15%);
    opacity: 0.5;
}

@keyframes jump {
    0%   {transform: translate(0, 0) scale(1, 1);}
    40%  {transform: translate(0, 3%) scale(1, 1.05);}
    100% {transform: translate(0, 12%) scale(1.05, .95);}
}

.ball.jump::after {
    animation: jump .5s linear alternate infinite;
}

@keyframes vanish {
    0%   {opacity: 1;}
    100% {opacity: 0;}
}

.ball.vanish::after {
    animation: vanish .5s linear forwards;
}

.level, #restart {
    float: right;
}