/* --- 1. ОБЩИЕ ПЕРЕМЕННЫЕ И БАЗОВЫЕ СТИЛИ --- */

:root {
    --color-text: antiquewhite;
    --color-background: #444;
}

body {
    background: var(--color-background);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    margin: 32px;
}

a,
a:visited {
    color: var(--color-text);
}

/* --- 2. СТРУКТУРА СТРАНИЦЫ И ОБЩИЕ КОНТЕЙНЕРЫ --- */

.test-container {
    align-items: center;
    display: flex;
    flex-direction: column;
}

.test-description {
    text-align: center;
    max-width: 900px;
}

.test-description-text {
    text-align: left;
}

#log-area {
    margin-top: 12px;
    max-width: 900px;
    width: 700px;
    white-space: pre-wrap;
}

/* --- 3. КОМПОНЕНТЫ --- */

#scene {
    --tile-w: 96px;
    --tile-h: 96px;
    margin: 16px;
}

.grid-wrapper {
    --wrapper-w: 0;
    --wrapper-h: 0;
    position: relative;
    width: var(--wrapper-w);
    height: var(--wrapper-h);
}

.grid {
    --grid-w: 0;
    --grid-h: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: var(--grid-w);
    height: var(--grid-h);
    transform-origin: left top;
    transform: translate(var(--grid-x), var(--grid-y)) rotateX(60deg) rotateZ(45deg);
}

.tile {
    position: absolute;
    width: var(--tile-w);
    height: var(--tile-h);
    background: #555;
    box-shadow: 0 0 0 1px #000;
}

.sprite {
    --size-w: 0;
    --size-h: 0;
    width: var(--size-w);
    height: var(--size-h);
    position: absolute;
}