:root {
	--tile-size: 16px;
}

@media (min-height: 640px) and (min-width: 352px) {
    :root {
        --tile-size: 32px;
    }
}

@media (min-height: 960px) and (min-width: 528px) {
    :root {
        --tile-size: 48px;
    }
}

@media (min-height: 1280px) and (min-width: 704px) {
    :root {
        --tile-size: 64px;
    }
}

@media (min-height: 1600px) and (min-width: 880px) {
    :root {
        --tile-size: 80px;
    }
}

@media (min-height: 1920px) and (min-width: 1056px) {
    :root {
        --tile-size: 96px;
    }
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #311409;
}

.top-section {
    background-color: #174882;
    height: var(--tile-size);
    display: flex;
    justify-content: center;
    align-items: center;
}

.middle-section {
    background: linear-gradient(to bottom, #174882, #33D1EE);
    height: calc(100% - calc(var(--tile-size)*3));
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
}

table {
    border-collapse: collapse;
}

td {
    width: var(--tile-size);
    height: var(--tile-size);
    border: 0px;
    padding: 0px;
}

.tile {
    background-size: var(--tile-size) var(--tile-size);
    background-repeat: no-repeat;
    image-rendering: pixelated;
}
.tile-solid {
    background-image: url('../images/forest_tile_solid.png');           
}
.tile-solid-top {
    background-image: url('../images/forest_tile_solid_top.png');           
}
.tile-breakable {
    background-image: url('../images/forest_tile_breakable.png');           
}
.tile-back {
    background-image: url('../images/forest_tile_back.png');           
}
.tile-ladder {
    background-image: url('../images/forest_tile_ladder.png');           
}
.tile-ladder-top {
    background-image: url('../images/forest_tile_ladder_top.png');           
}
.tile-fixed {
    background-image: url('../images/forest_tile_fixed.png');           
}
.tile-player {
    background-image: url('../images/player.png');           
}
.tile-princess {
    background-image: url('../images/princess.png');           
}
.tile-enemy {
    background-image: url('../images/enemy.gif');           
}

.item {
    width: var(--tile-size);
    height: var(--tile-size);
    display: block;
    image-rendering: pixelated;
}

.bubble-chat {
    background-size: calc(var(--tile-size)*3) calc(var(--tile-size)*3);
    background-image: url('../images/bubble_chat_ss.png');           
}
.bubble-chat-top-left {
    background-position: 0px 0px;
}
.bubble-chat-top {
    background-position: calc(var(--tile-size)*-1) 0px;
}
.bubble-chat-top-right {
    background-position: calc(var(--tile-size)*-2) 0px;
}
.bubble-chat-right {
    background-position: calc(var(--tile-size)*-2) calc(var(--tile-size)*-1);
}
.bubble-chat-bottom-right {
    background-position: calc(var(--tile-size)*-2) calc(var(--tile-size)*-2);
}
.bubble-chat-bottom {
    background-position: calc(var(--tile-size)*-1) calc(var(--tile-size)*-2);
}
.bubble-chat-bottom-left {
    background-position: 0px calc(var(--tile-size)*-2);
}
.bubble-chat-left {
    background-position: 0px calc(var(--tile-size)*-1);
}
.bubble-chat-center {
    background-position: calc(var(--tile-size)*-1) calc(var(--tile-size)*-1);
}
.bubble-chat-tail {
    background-image: url('../images/bubble_chat_tail.png');           
}
.bubble-chat-content {
    background-size: calc(var(--tile-size)*9) calc(var(--tile-size)*2);
    background-repeat: no-repeat;
    image-rendering: pixelated;
    background-color: rgba(255, 255, 255, 0.6);
    background-image: url('../images/chat.gif');           
}

.img-store {
    height: calc(var(--tile-size)*2);
    width: auto;
}

.img-link-app-store {
    position: absolute;
    bottom: calc(var(--tile-size)*3.5);
}
.img-link-play-store {
    position: absolute;
    bottom: calc(var(--tile-size)*1.25);
}

.pattern-section {
    height: var(--tile-size);
    background-size: var(--tile-size) var(--tile-size);
    background-repeat: repeat;
    image-rendering: pixelated;
    background-image: url('../images/forest_tile_ground.png');
}

.bottom-section {
    background-color: #311409;
    height: var(--tile-size);
    position: relative;
}