body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}


table td {
    padding: .5rem .5rem .5rem 0;
}


button {
    border-radius: .5rem;
    border-color: #030;
    background-color: darkgreen;
    color: white;
    padding: .25rem .5rem;
    cursor: pointer;
}

h1 { text-align: center; }

.red    { color: #f66 }
.orange { color: orange }
.yellow { color: yellow }
.green  { color: mediumseagreen }
.blue   { color: lightskyblue }
.purple { color: mediumpurple }
.pink   { color: pink }
.white  { color: white }
.black  { color: #f3f3f3 }

.red-rev    { background-color: #f66 }
.orange-rev { background-color: orange }
.yellow-rev { background-color: yellow }
.green-rev  { background-color: mediumseagreen }
.blue-rev   { background-color: lightskyblue }
.purple-rev { background-color: mediumpurple }
.pink-rev   { background-color: pink }
.white-rev  { background-color: #f3f3f3; }
.black-rev  { background-color: black; color: white; }

.fade { opacity: .5; }

.pane {
    border: 1px solid grey;
    margin: .5rem;
    padding: .5rem;
}
.pane h2 {
    margin: 0 0 .75rem 0;
    padding: 0;
}

.game-settings {
    display: flex;
}
.game-settings div {
    padding-right: 2rem;
}
.game-settings input {
    width: 50px;
}

.room-build-dice {
    display: flex;
    text-align: center;
    justify-content: center;
}

.room-build-dice p {
    padding: 1rem;
    border: 1px solid white;
    width: 12.5%;
    margin: 0;
    position: relative;
}

.room-build-dice p span {
    display: block;
    font-size: 2rem;
}

.room-build-dice p small {
    font-size: 1.25rem;
    display: block;
}

.room-build-dice p img.reroll {
    display: block;
    position: absolute;
    right: 0rem;
    top: 0rem;
    background: rgba(255, 255, 255, .5);
}

.room-build-dice p img.peaker {
    display: none;
}
.room-build-dice.hide-sensitive p img.peaker {
    display: block;
    margin-top: .5rem;
    transform:scale(.75, .75);
    position: absolute;
    right: -.4rem;
    bottom: -.75rem;
}

.room-build-dice.hide-sensitive p img.peaker.fade {
    display: inline;
    position: static;
    transform: none;
}

.room-build-dice.hide-sensitive p span.sensi {
    display: none;
}




.action-wrap {
    display: block;
    text-align: center;
    font-size: 1.5rem;
}

#rollRoomDice {
    font-size: 1.5rem;
}

.action-wrap input[type=checkbox] {
    transform:scale(2, 2);
    margin-left: 2rem;
}

#roomSummary table td {
    padding: .5rem;
}
#roomSummary table td:nth-child(2) {
    display: flex;
    align-items: center;
}
#roomSummary table td:nth-child(2) img {
    margin-right: .5rem;
    display: none;
}
#roomSummary table.hide-sensitive td:nth-child(2) img {
    display: block;
}
#roomSummary table.hide-sensitive td:nth-child(2) span.sensi {
    display: none;
}



.map-pane .map-cell {
    border: 1px solid black;
    position: relative;
}
.map-pane .lbl {
    padding: .1rem;
}
.map-pane .map-lbl {
    display: block;
    position: absolute;
}
.map-pane .map-lbl.p {
    top: .1rem;
    left: .1rem;
}
.map-pane .map-lbl.m {
    top: .1rem;
    right: .1rem;
}
.map-pane .map-lbl.h {
    bottom: .1rem;
    left: .1rem;
}
.map-pane .map-lbl.rc {
    bottom: .1rem;
    right: .1rem;
    color: grey;
}

#mapWrap {
    display: flex; 
    flex-wrap: wrap
}


@media screen and (max-width: 600px) {
    body {
        font-size: 2rem;
    }

    h1, h2 {
        font-size: 2rem;
    }

    .game-settings {
        flex-wrap: wrap;
    }
    
    .room-build-dice {
        flex-wrap: wrap;
    }

    .room-build-dice p {
        width: 25%;
    }

    #roomSummary {
        font-size: 1.5rem;
    }

}

@media screen and (max-width: 1020px) {
    
    .game-settings div {
        font-size: 1.5rem;
    }

    .game-settings div input {
        font-size: 1.5rem;
        display: block;
        margin-top: 1rem;
    }

    .room-build-dice {
        flex-wrap: wrap;
    }

    .room-build-dice p {
        width: 20%;
    }

    #mapWrap, 
    #mapLegend .legend {
        display: none;
    }

    #mapLegend { width: auto; }


}

/* @media screen and (min-width: 1200px) {
    .map-pane {
        display: flex;
    }
    #mapWrap {
        width: 75%; 
        display: flex; 
        flex-wrap: wrap;
        order: 1;
    }
    #mapLegend { 
        order: 2;
        width: 25%; 
    }
} */