:root {
    --flood-red: #b8324b;
    --flood-blue: #3498db;
    --flood-green: #2ecc71;
    --flood-yellow: #f1c40f;
    --flood-violet: #8e44ad;
    --flood-indigo: #3b3fbd;
    --flood-orange: #f07a24;
}

#game-canvas-wrapper {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 14px;
}

#game-canvas-area {
    position: relative;
    display: block;
    width: min(80vw, 420px);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    overflow: visible;
    background: transparent;
    touch-action: manipulation;
}

.flood-grid {
    display: grid;
    width: 100%;
    height: 100%;
    gap: 1px;
    padding: 1px;
    overflow: visible;
}

.flood-cell {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    background: transparent;
    transition: transform 0.16s ease;
}

.flood-color-0 {
    --tile-face: var(--flood-red);
    background: var(--flood-red);
}

.flood-color-1 {
    --tile-face: var(--flood-blue);
    background: var(--flood-blue);
}

.flood-color-2 {
    --tile-face: var(--flood-green);
    background: var(--flood-green);
}

.flood-color-3 {
    --tile-face: var(--flood-yellow);
    background: var(--flood-yellow);
}

.flood-color-4 {
    --tile-face: var(--flood-violet);
    background: var(--flood-violet);
}

.flood-color-5 {
    --tile-face: var(--flood-indigo);
    background: var(--flood-indigo);
}

.flood-color-6 {
    --tile-face: var(--flood-orange);
    background: var(--flood-orange);
}

.flood-cell,
.flood-color-btn {
    background: transparent;
}

.flood-color-btn .game-tile-paper {
    inset: 3px;
    transition: transform 0.14s ease, filter 0.14s ease;
}

.flood-color-btn .game-tile-paper--palette {
    inset: 0;
}

#palette-area {
    width: min(80vw, 420px);
    margin: 0 auto;
}

.flood-palette {
    display: flex;
    width: 100%;
    margin: 0 auto;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding: 6px;
    overflow: visible;
}

.flood-color-btn {
    position: relative;
    display: block;
    flex: 1 1 0;
    max-width: 64px;
    aspect-ratio: 1 / 1;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    cursor: pointer;
    filter: none;
    transition: transform 0.14s ease;
}

.flood-color-btn:hover {
    transform: translateY(-1px);
}

.flood-color-btn.active {
    z-index: 2;
    flex-grow: 1.2;
    max-width: 77px;
    box-shadow: none;
    outline: none;
}

.flood-color-btn.active .game-tile-paper {
    transform: none;
}

.flood-color-btn:disabled {
    cursor: default;
    transform: none;
}

.flood-color-btn.active:disabled {
    opacity: 1;
}

.flood-color-btn:focus-visible {
    outline: 3px solid rgba(52, 152, 219, 0.35);
    outline-offset: 3px;
}

@media (max-width: 640px) {

    .controls-layer {
        --controls-grid-gap: 6px;
    }
}