html {
    font-size:16px;
    font-family: system-ui, sans-serif;
    font-weight: normal;
    --hbzoom: 1.0;
}
@media (max-width: 800px) {
    html {
        font-size:12px;
    }
}
#touchcontrols {
    display:none;
}
@media screen and (pointer: coarse) {
    #touchcontrols {
        display: block;
        position: absolute;
        bottom: 0px;
        right: 0px;
        z-index: 1;
    }
    #touchcontrolscontents {
        display: flex;
        gap: 1rem;
        padding: 1rem;
        background: rgba(0,0,0,0.5);
        color: white;
        border-radius: 0.5rem;
    }
}

html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

body {
    overflow:hidden;
}

* { padding:0px; margin:0px; }

#sidepanel {
    position:absolute;
    right:0px;
    top:0px;
    width:30rem;
    height:100dvh;
}

#miscinfo {
    background:rgba(0,0,0,0.5);
    color:white;
    padding:1em;
    display:inline-block;
    position:absolute;
    bottom:0px;
    left:0px;
}

#testmap {
    display:none;
}
#testmap.open {
    display:block;
}
h5 {
    font-size: 14px;
    text-transform: uppercase;
}
#title {
    position:absolute;
    top:0;
    left:0;
    width:100vw;
    height:100dvh;
    background-image:url('media/images/title.jpg');
    background-size:cover;
    background-position:center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:3;
}
aside#titlecontents {
    margin-top: 30vh;
    font-weight: bold;
}

#mainmenu {
    position:absolute;
    top:0;
    left:0;
    width:100vw;
    height:100dvh;
    background:rgba(0,0,0,1);
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    display:none;
    pointer-events: none;
    z-index:2;
    color:white;
}
#mainmenu.open {
    display:flex;
    pointer-events: all;
}

.hb_wrap, .ab_wrap {
    height:calc(var(--hbzoom) * 0.3rem);
    width:calc(var(--hbzoom) * 2rem);
    /* border:1px solid black; */
    background:#777;
    position:relative;
    z-index:1;
    display:flex;
}
.hb_wrap.bigboy {
    width:4rem;
    height:0.6rem;
}


.hb, .ab {
    transition:width 0.5s ease;
}
.hb, .ab, .hb_scale, .ab_scale {
    width:100%;
    height:100%;
}
.hb_scale, .ab_scale {
    /* background-image:url('media/images/hb_bar.png'); */
    background-image:linear-gradient(to left, #777 1px, transparent 0px, transparent);
    background-repeat:repeat-x;
    position:absolute;
}
.hb_wrap.bigboy .hb_scale {
    width:100%;
    background-image:linear-gradient(to left, #777 1px, transparent 0px, transparent);
}
.hb {
    background:#7d7;
}
.ab {
    background:#fff;
}
.sb {
    background:#eb52f1;
}
.ab_wrap {
    z-index:2;
}
#maininfo_wrap {
    position:absolute;
    margin-left:auto;
    margin-right:auto;
    top:2rem;
    height:2rem;
    display:flex;
    justify-content:center;
    align-items: center;
    width: 100%;
}
#maininfo {
    padding:1rem;
    background:white;
    width:auto;
    display:flex;
    width:30rem;
    gap:2rem;
    justify-content:center;
}

div#towers_available_wrap {
    position: absolute;
    top: 0rem;
    width: 10rem;
    padding: 2rem;
}
div#towers_available {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-direction: column;
}
div#towers_available > div {
    width: 10rem;
    height: 12rem;
    background: #eee;
    padding:1rem;
    font-weight:bold;
    text-align: center;
    border:5px solid rgb(88,88,88);
    border-radius: 0.25rem;
    background-image:url(media/backgrounds/lightcard.jpg);
    background-size:cover;
    background-position:center bottom;
}

@media (orientation: portrait) {
    div#towers_available_wrap {
        top:auto;
        bottom:0px;
        width: 100vw;
        padding: 2rem;
    }
    div#towers_available {
        display: flex;
        gap: 2rem;
        justify-content: center;
        flex-direction: row;
        overflow-x: auto;
    }
    div#towers_available > div {
        width: 10rem;
        height: 12rem;
        background: #eee;
        padding:1rem;
        font-weight:bold;
        text-align: center;
        border:5px solid rgb(88,88,88);
        border-radius: 0.25rem;
        background-image:url(media/backgrounds/lightcard.jpg);
        background-size:cover;
        background-position:center bottom;
    }

}

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
h5.card-title {
    font-size: 1.3rem;
}
.tower_card > *, .tile_card > * {
    pointer-events:none; 
}

.tile_card {
    background: #eee;
    opacity:0.9;
    padding:1rem;
    text-align: center;
    pointer-events:all !important;
    border: 5px solid #aaa;
    border-radius: 1rem;
    font-weight: bold;
    text-transform: uppercase;
}

.card:hover {
    cursor:pointer;
    border-color:#222 !important;
}

.card.selected {
    border-color:blue !important;
}

#tower_info {
    position: absolute;
    right:0px;
    top:0px;
    width: 40rem;
    height: 100dvh;
    background: #fff;
    padding:2rem;
    text-align: center;
    pointer-events:all !important;
    transform:translateX(40rem);
    transition:all 0.3s ease;
    z-index:999;
    background: url(media/backgrounds/embossed.jpg);
    background-size: cover;
    color: white;
    background-blend-mode: overlay;
    background-color: #222;
    font-size: 14px;
}
#tower_info.open {
    transform:translateX(0rem);
}
aside#tower_targetting_wrap {
    
}
#tower_info hr {
    margin:1rem;
    opacity: 0.1;
}
#tower_info .flex {
    display: flex;
    justify-content: space-evenly;
    gap: 2em;
}

.tower_targetting_options {
    display:flex;
    flex-wrap:wrap;
    font-size:14px;
    gap:0.5em;
    justify-content: space-between;
    margin: 1rem;
    padding: 1rem;
    /* border: 1px solid #aaa; */
    background: rgba(0, 0, 0, 0.5);

}
.targetting_type.selected {
    font-weight: bold;
    background: #111;
    outline: 2px solid #555;
}

p.targetting_type {
    /* width: 50%; */
    flex-shrink: 0;
    min-width: 41%;
    margin: 0.05em;
    padding: 0.1em;
}
p.targetting_type:hover {
    cursor:pointer;
    background: #666;
}

.numpaths {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

button {
    padding:0.5em 1em;
    border:none;
    border-radius:0.5rem;
}
button:hover {
    cursor:pointer;
}

aside#mainmenucontents {
    gap: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h1 {
    font-size:2.5rem;
}