body {
  margin:0;
  font-family:sans-serif;
  background:#0b1220;
  color:white;
}

header {
  display:flex;
  justify-content:space-between;
  padding:10px;
  background:#111;
}

.layout {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:10px;
  padding:10px;
}

@media(max-width:900px){
  .layout{grid-template-columns:1fr;}
}

.card {
  background:#1a2238;
  padding:10px;
  border-radius:10px;
}

/* MAP */
.stage-wrap {
  overflow:auto;
}

.stage {
  position:relative;
  display:inline-block;
  transform-origin:0 0;
}

#mapImg {
  width:900px;
  display:block;
  pointer-events:none; /* IMPORTANT FIX */
}

/* DOTS */
.dot {
  position:absolute;
  transform:translate(-50%,-50%);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:bold;
  color:black;
}

/* sizes */
.small{width:12px;height:12px;}
.medium{width:18px;height:18px;}
.large{width:26px;height:26px;}

/* shapes */
.circle{border-radius:50%;}
.square{border-radius:4px;}

.triangle{
  width:0;height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:18px solid red;
  background:none;
}

.cross::before,
.cross::after{
  content:"";
  position:absolute;
  background:white;
}
.cross::before{
  width:4px;height:100%;
  left:50%;transform:translateX(-50%);
}
.cross::after{
  height:4px;width:100%;
  top:50%;transform:translateY(-50%);
}

/* colours */
.red{background:#ff4d4d;}
.blue{background:#4da6ff;}
.green{background:#4dff88;}
.orange{background:#ff944d;}
.purple{background:#b84dff;}
.yellow{background:#ffd24d;}

.selected{
  outline:2px solid cyan;
}

.layers {
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.panel input,
.panel select,
.panel textarea {
  width:100%;
  margin:5px 0;
}