:root {
	--tile: min(10vw, 60px);
}

    body {
		margin: 0;
		padding: 0;
		padding-bottom: 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-family: sans-serif;
		min-height: 100vh;
		touch-action: manipulation;
    }

	.game {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 4px;
			margin-top: 2vh;
			/* margin-bottom: 60px; */
	}
	
		.main {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 4px;
			margin-top: 2vh;
			/* margin-bottom: 60px; */
	}
	
	@media (orientation: portrait) {
		.game {
			flex-direction: column;
			align-items: center;
		}
		.main {
			 width: calc(9 * var(--tile));
		}
		.inventory {
			flex-direction: row;
		}
	}

	@media (orientation: landscape) {
		.game {
			flex-direction: row;
			align-items: flex-start;
		}
		.main{
			display: flex;
			flex-direction: column;
			gap: 4px;
		}
		.inventory {
			flex-direction: column;
		}
	}
	
    .grid {
        display: grid;
        grid-template-columns: repeat(9, var(--tile));
        grid-template-rows: repeat(9, var(--tile));
        gap: 0px;
        margin: 0;
		border: 2px solid black;
		padding: 0px;
		background: #c7f0d8;
		border-collapse: collapse;
    }

    .cell {
        width: var(--tile);
   		aspect-ratio: 1/1;
        border: 0px;
		padding: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #c7f0d8;
    }

    .cell img {
        width: 100%;
        height: 100%;
		object-fit: contain;
        pointer-events: none;
    }

	.inventory{
		display: grid;
		grid-template-columns: repeat(9, var(--tile));
		grid-template-rows: repeat(1, var(--tile));
		gap: 0;
		margin: 0;
		border: 2px solid black;
		background: #c7f0d8;
	}
	
	.log {
		border: 2px solid black;
		padding: 4px;
		width: calc(9 * var(--tile));
		height: 5.8em;
		line-height: 1.2em;
		font-family: monospace;
		overflow: hidden;
		background: #c7f0d8;
		color: #43523d;
		box-sizing: border-box;
		margin: 0;
		flex-direction: row;
	}
	
	@media (orientation: landscape) {
		.inventory {
			grid-template-columns: repeat(1, var(--tile));
			grid-template-rows: repeat(9, var(--tile));
		}
	}

	.inventory .slot img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	
    .active {
        /* outline: 3px solid black; */
    }

    .controls {
        display: grid;
        grid-template-columns: repeat(3, 60px);
        grid-template-rows: repeat(2, 40px);
        gap: 5px;
		margin-top: 4px;
		flex-direction: row;
		align-items: center;
    }

    button {
		width: var(--tile);
		height: min(6vw, 40px);
		font-size: min(4vw, 20px);
        cursor: pointer;
    }
	
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 6px 12px;
		background: black;
		color: white;
		font-size: 14px;
	}

	.footer button {
		height: 32px;
		min-width: 90px;
		cursor: pointer;
	}
	
	body.dark {
    background: black;
    color: white;
}

body.dark .cell {
    background: #222;
}

body.hivis .cell,
body.hivis .log,
body.hivis .inventory {
    background: #c7f0d8;
	color: black;
	font-weight: bold;
    filter: contrast(140%);
}

body.hivis img {
    image-rendering: pixelated;
}