:root {
    --tile-fg: #000;
    --tile-bg: #fec;
    --tile-size: 40px;
}

#board {
    flex: 1;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    z-index: 10;
 }

#bat {
    position: absolute;
    bottom: calc(var(--tile-size) / 4);
    min-width: var(--tile-size);    
    min-height: var(--tile-size);    
    border: 1px solid #040;
    border-radius: calc(var(--tile-size) / 8);
    background-color: #060;
    z-index: 20;
}

#results {
    flex: 1;
    border-left:1px solid var(--mid-colour);
    box-sizing: border-box;
    max-width: 16em;    
}

.tile {
    position: absolute;
    width: var(--tile-size);    
    height: var(--tile-size);    
    border: 1px solid var(--mid-colour);
    color: var(--tile-fg);
    background-color: var(--tile-bg);
    border-radius: calc(var(--tile-size) / 8);
}
.tile div:first-child {
    font-size: calc(var(--tile-size) / 2);
    line-height: calc(var(--tile-size) / 2);
    text-align: center;
    padding-top: calc(var(--tile-size) / 6);
}
.tile div:last-child {
    font-size: calc(var(--tile-size) / 4);
    line-height: calc(var(--tile-size) / 4);
    text-align: end;
    margin-top: calc(var(--tile-size) / -8);
    padding-right: calc(var(--tile-size) / 8);
}

#bat .tile {
    position: relative;
    display: inline-block;
}

@media (max-aspect-ratio: 1) {
    #results {
        border-left:none;
        border-top:1px solid var(--mid-colour);
        max-width: unset;  
        max-height: 12em;      
    }
}