* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Verdana, sans-serif;
}

html, body {
    height: 100%;
}

body {
    display: flex;
}

main {
    display: flex;
    flex-direction: row;
    margin: 8px;
    gap: 8px;
}

.panel {
    display: flex;
    flex-direction: column;
    min-width: 275px;
    height: fit-content;
    padding: 8px;
    gap: 4px;
    background-color: #ccc;
    color: #000;
    color-scheme: light;
    accent-color: #51804d;
}

.panel h1 {
    font-size: 16px;
}

.panel hr {
    margin: 4px 0;
    border: solid 1px #777;
}

.panel p,
.panel span {
    max-width: 250px;
}

.panel p {
    margin-top: 8px;
}

.panel,
.panel button,
.panel input {
    font-size: 12px;
    border: solid 1px #777;
    border-radius: 4px;
}

.panel button,
.panel input {
    padding: 2px 4px;
    background-color: #fff;
    color: #000;
}

.panel button:active {
    background-color: #51804d;
    color: #fff;
    border: solid 1px #fff;
}

.panel button:disabled,
.panel input:disabled {
    background-color: #999;
    cursor: not-allowed;
}

.panel button:disabled:active {
    color: inherit;
    border: solid 1px #777;
}

.panel input::placeholder {
    color: #777;
}

.panel input:disabled::placeholder {
    color: #555;
}

/*
 * World stats
 */

.panel .world-stats > * {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 22px;
    gap: 12px;
}

.panel .world-stats > * span:first-child {
    width: 32px;
}

/*
 * Details
 */

.panel details ul {
    max-width: 242px;
    margin-left: 8px;
}

.panel details li {
    display: flex;
    flex-direction: row;
    padding: 4px 0;
}

.panel details li:nth-child(odd) {
    background-color: #bbb;
}

.panel details.assoc li span {
    flex: 1;
}

.panel details.assoc .value {
    flex: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-wrap: nowrap;
}

/*
 * Options
 */

.panel .options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.panel .options > * {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.panel .options button,
.panel .options input {
    flex: 1;
    width: 0;
}

.panel .options input[type=number] {
    appearance: textfield;
}

.panel .options input[type=number]::-webkit-inner-spin-button,
.panel .options input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.panel .options #optStartSimulation,
.panel .options #optResetSimulation {
    flex: 0 0 fit-content;
}

.panel .options #optAiNextStep          { background-color: #bef; }
.panel .options #optAiNextStep:active   { background-color: #589; }
.panel .options #optAiNextStep:disabled { background-color: #999; }

.panel .options #optAiRunBatch          { background-color: #ffb; }
.panel .options #optAiRunBatch:active   { background-color: #994; }
.panel .options #optAiRunBatch:disabled { background-color: #999; }

/*
 * Sprites
 */

.panel .sprite {
    width: 32px;
    height: 32px;
}

.panel .sprite.gold {
    width: 20px;
    height: 8px;
    margin: 0 6px;
    background-size: 224px auto;
    background-position: -102px -56px;
}

.panel .sprite.wumpus {
    background-size: 224px auto;
    background-position: -128px 0;
}

.panel .sprite.pit {
    height: 22px;
    background-size: 224px auto;
    background-position: -96px -5px;
}

.sprite {
    background-image: url("sprites.png");
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

/*
 * Canvas
 */

canvas {
    background: repeating-linear-gradient(
        45deg,
        #228,
        #228 25%,
        #117 25%,
        #117 50%
    );
    background-size: 128px 128px;
    animation: canvas-scroll 2s linear infinite;

    image-rendering: pixelated;
    border-radius: 4px;
}

@keyframes canvas-scroll { to { background-position: 128px 0; } }

canvas:focus {
    outline: solid 3px #51804d;
}