:root {
    --green: #94c74d;
    --green-100: #a5d04e;
    --green-500: #6f9b31;
}
*, ::after, ::before {
    box-sizing: border-box;
}
body {
    font-family: monospace, Arial, sans-serif;
    text-transform: uppercase;
    background-color: #1e1e1e;
    color: white;
    display: flex;
    justify-content: center;
    align-items: stretch;
    height: 100dvh;
    margin: 0;
    user-select: none;
}

.container {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0.5rem;
    width: 100%;
    max-width: calc(400px + 1rem);
}
.game-title {
    margin: 0;
    background-color: #24a9bb;
    line-height: 1;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: inset 0 0 1rem 5px #007a85;
    color: #007a8b;
    text-shadow: 1px 1px #3ebbcb, -1px -1px #00646f;
}

.navbar-header, .navbar-footer {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.navbar-header {
    margin-bottom: auto;
}
.navbar-footer {
    margin-top: auto;
    justify-content: center;
}
.game-area {
    position: relative;
}
.snackbar {
    visibility: hidden;
    min-width: 200px;
    background-color: rgba(161, 203, 76, 0.95);
    color: white;
    text-align: center;
    padding: 16px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -12.5%);
    bottom: 100%;
    border-radius: 8px;
    z-index: 1000;
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.game-canvas {
    background-color: #000000;
    width: 100%;
    aspect-ratio: 1;
    box-shadow: inset 0 0 0 1px #ffffff;
}

.game-score,
.game-level,
.game-food {
    flex-grow: 1;
    text-align: left;
}

.btn {
    --btn-bg-color: var(--green-100);
    --btn-text-color: #fff;
    --btn-border-color: var(--green-500);
    --btn-active-border-color: var(--green-100);
    flex: 1 0 0;
    padding: 0.5rem 1rem;
    border: none;
    cursor: pointer;
    box-shadow: inset 0 0 0.75rem 1px rgb(0 0 0 / 50%), 0 0 0 1px var(--btn-border-color);
    background-color: var(--btn-bg-color);
    color: var(--btn-text-color);
    font-size: 1rem;
    line-height: 1;
    text-transform: uppercase;
    border-radius: 0.25rem;
    font-weight: bold;
    font-family: monospace;
}
.btn[disabled] {
    cursor: not-allowed;
    --btn-bg-color: #939393;
    --btn-text-color: #d5d5d5;
    --btn-border-color: #939393;
    --btn-active-border-color: #939393;
    opacity: 0.25;
}
.btn:not([disabled]):active {
    transform: translate(1px, 2px);
    outline: 1px solid var(--btn-active-border-color);
}
.btn:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0.75rem 1px rgb(0 0 0 / 50%), 0 0 0px 2px var(--btn-focus-border-color);
}
.btn-settings {
    flex-grow: 0;
    line-height: 0;
    padding: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

.btn-settings > img {
    width: 1rem;
    aspect-ratio: 1;
}
.btn-start {
    --btn-bg-color: #00e1ff;
    --btn-text-color: #000000;
    --btn-border-color: #00e1ff;
    --btn-active-border-color: #80f0ff;
    --btn-focus-border-color: #00e1ff;
}
.btn-pause {
    --btn-bg-color: #feff00;
    --btn-text-color: #000;
    --btn-border-color: #feff00;
    --btn-active-border-color: #ffff80;
    --btn-focus-border-color: #ffff00;
}
.btn-restart {
    --btn-bg-color: #ff6700;
    --btn-text-color: #fff;
    --btn-border-color: #ff6700;
    --btn-active-border-color: #ffb380;
    --btn-focus-border-color: #ff6600;
}
.modal {
    border: 1px solid #1a1a1a;
    border-radius: 0.25rem;
    min-width: 200px;
    max-width: 300px;
    width: 100%;
    min-height: 100px;
    box-shadow: 0 0 7px 2px #000000;
    background-color: #1b1b1b;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    color: #fff;
}
.modal[open] {
    opacity: 1;
}

.modal::backdrop {
    background: #1e1e1e;
    opacity: 0.5;
}

.modal-title {
    margin: 0;
}
.modal-body {
    min-height: 50px;
}
.modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.modal-footer > * {
    flex: 0 0 0;
    text-align: center;
}
.settings-table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
}
.settings-table td,
.settings-table th {
    padding: 0.5rem 0;
}
.settings-table th {
    text-align: left;
    padding-right: 0.5rem;
}
.settings-table td {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 0.5rem;
}
select, ::picker(select) {
    appearance: base-select;
}
select {
    display: block;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    padding: 0.125rem 0.5rem;
    background-color: #2b2b2b;
    color: #fff;
}
::picker(select) {
    border-radius: 0.25rem;
    border: none;
    margin-top: 0.25rem;
    padding: 0.5rem;
    box-shadow: 1px 1px 6px 2px #000000;
    background-color: #2b2b2b;
}
::picker(select:open) {
    display: flex;
}
select:focus-visible {
    outline: none;
}
::picker-icon {
    color: #9fef8f;
    transition: transform 0.3s ease-in-out;
}
select:open::picker-icon {
    transform: rotateX(180deg);
}
option {
    --option-bg-color: transparent;
    --option-text-color: #fff;
    --option-border-color: #40df20;
    --option-active-border-color: hsl(110, 75%, 75%);
    --option-focus-border-color: #40df20;
    font-size: 0.85rem;
    border-radius: 0.125rem;
    justify-content: space-between;
    cursor: pointer;
    background-color: var(--option-bg-color);
    color: var(--option-text-color);
}
option:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0.75rem 1px rgb(0 0 0 / 50%), 0 0 0px 2px var(--option-focus-border-color);
}
option:checked {
    --option-bg-color: #40df20;
    box-shadow: inset 0 0 0.75rem 1px rgb(0 0 0 / 50%), 0 0 0 1px var(--option-border-color);
}
option:hover {
    --option-text-color: #000;
    --option-bg-color: #9fef8f;
}
option:not(:last-child) {
    margin-bottom: 0.25rem;
}
option::checkmark {
    content: '\21D2';
}
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 0.75rem;
    background: #fff;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: 0.125rem;
    margin: 0;
}
input[type="range"]:hover {
    opacity: 1;
}

input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0.75rem;
    height: 1.25rem;
    background: var(--green-100);
    cursor: pointer;
    border-radius: 0.125rem;
}
input::-moz-range-thumb {
    width: 0.75rem;
    height: 1.25rem;
    background: var(--green-100);
    cursor: pointer;
    border-radius: 0.125rem;
}
input::-webkit-slider-runnable-track { /* common styles */ }
input::-moz-range-track { /* common styles */ }
input::-ms-track { /* common styles */ }

.btn-close, .btn-toggle, .btn-install {
    border-radius: 0.125rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    flex-grow: 0;
}
.btn-install {
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
    --btn-bg-color: #40df20;
    --btn-text-color: #fff;
    --btn-border-color: #40df20;
    --btn-active-border-color: #9fef8f;
    --btn-focus-border-color: #40df20;
}
.btn-toggle {
    min-width: 2.5rem;
}
.btn-close {
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
    --btn-bg-color: #df20df;
    --btn-text-color: #fff;
    --btn-border-color: #df20df;
    --btn-active-border-color: hsl(300 75% 75% / 1);
    --btn-focus-border-color: #df20df;
}
.btn-toggle[on] {
    --btn-bg-color: #40df20;
    --btn-text-color: #fff;
    --btn-border-color: #40df20;
    --btn-active-border-color: #9fef8f;
    --btn-focus-border-color: #40df20;
}
.btn-toggle[off] {
    --btn-bg-color: #ff0000;
    --btn-text-color: #fff;
    --btn-border-color: #ff0000;
    --btn-active-border-color: #ff8080;
    --btn-focus-border-color: #ff0000;
}