@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cabin&display=swap');
@font-face {
  font-family: 'Segment7';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(Segment7-4Gml.otf) format('opentype');
}
body {
  background: #655; 
  margin: 0px;
}
#game {
  display: grid;
  grid-gap: 8px;
  width: 1200px; 
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.inset {
  border-width: 3px; 
  border-style: solid; 
  border-color: #433 #a99 #dcc #766;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 6px 9px;
  background: #110;
  grid-column: 1;
}
#root {
  grid-column: 2/span 2;
  grid-row: 1;
  width:1000px; 
  height:600px; 
  padding: 2px;
  background: #000;
}
#root.action-waypoint-1 { cursor: url(icons/waypoint-1.png) 24 46,auto; }
#root.action-waypoint-2 { cursor: url(icons/waypoint-2.png) 24 46,auto; }
#root.action-waypoint-3 { cursor: url(icons/waypoint-3.png) 24 46,auto; }
#timeline {
  grid-column: 1/span 2;
  grid-row: 2;
  width: 946px; 
  padding: 2px;
}
#timeline.action-waypoint-1    { cursor: url(icons/waypoint-1.png) 24 46,auto; }
#timeline.action-waypoint-2    { cursor: url(icons/waypoint-2.png) 24 46,auto; }
#timeline.action-waypoint-3    { cursor: url(icons/waypoint-3.png) 24 46,auto; }
#timeline.action-wait   { cursor: url(icons/wait.png      ) 24 24,auto; }
#timeline.action-solar  { cursor: url(icons/solar.png     ) 24 24,auto; }
#timeline.action-grab   { cursor: url(icons/grab.png      ) 33 11,auto; }
#timeline.action-sample { cursor: url(icons/sample.png    )  4 37,auto; }
#timeline.action-stop   { cursor: url(icons/stop.png      ) 24 24,auto; }
.info {
  display: flex;
  flex-direction: column;
  width: 194px;
  grid-column: 1;
  grid-row: 1;
}
.info > * {
  margin-bottom: 8px;
  flex-grow: 1;
}
.info > :last-child {
  margin-bottom: 0px;
  height: 145px;
}
.actions {
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-column: 3;
  grid-row: 2;
}
.button {
  align-self: stretch;
  border-width: 3px; 
  border-style: solid; 
  border-color: #dcc #766 #433 #a99; 
  border-radius: 6px;
  box-sizing: border-box;
  padding: 0px 2px 2px 0px;
  background: #977;
}
.button:hover {
  background: #b88;
  border-color: #fdd #977 #644 #caa; 
}
.button:active {
  background: #977;
  border-color: #433 #a99 #dcc #766; 
  padding: 2px 0px 0px 2px;
}
.button.selected {
  background: #799;
  border-color: #344 #9aa #cdd #677; 
  padding: 2px 0px 0px 2px;
}
.button.selected:active {
  background: #799;
  border-color: #cdd #677 #344 #9aa; 
  padding: 0px 2px 2px 0px;
}
.disabled {
  filter: grayscale(75%);
  background: #888 !important;
  border-color: #ddd #777 #444 #aaa !important;
  padding: 0px 2px 2px 0px !important;
}


/* Root */
.target {
  fill: rgba(128,255,0.0,0.5);
  stroke: #408000;
  stroke-width: 2px;
}

/* Info */
p {
  margin: 0px;
}
.caption, .unit {
  font-family: 'Cabin', sans-serif;
  fill: #ddb;
  color: #ddb;
}
.caption {
  font-size: large;
  margin-bottom: 8px;
}
.unit {
  font-size: 25px;
}
.caption + * {
  text-align: right;
}
#status {
  font-family: 'VT323', monospace;
  font-size: large;
  fill: #0d0;
  color: #0d0;
  text-shadow: 0px 0px 3px #0c0;
  padding: 0px 4px;
  overflow: hidden;
  line-height: 80%;
}
.value {
  font-family: 'Segment7', monospace;
  font-size: x-large;
  fill: #0d0;
  color: #0d0;
  text-shadow: 0px 0px 5px #0f0;
}
.empty {
  background: #544 !important;
}
#status p.warning {
  color: #dd0;
  text-shadow: 0px 0px 3px #cc0;
}
#status p.error {
  color: #d00;
  text-shadow: 0px 0px 3px #c00;
}
#status p.good {
  color: #0dd;
  text-shadow: 0px 0px 3px #0cc;
}
a { 
  color: #327345; 
  text-shadow: 0px 0px 3px #327345;
}


/* Timeline */
#timeline {
  color: #0c0;
}
line, path {
  stroke: currentColor;
  fill: none;
}
text {
  font-family: 'VT323', monospace;
  font-size: large;
  stroke: none;
  fill: currentColor;
  text-shadow: 0px 0px 3px currentColor;
}
.tick {
  user-select:none;
}
.signal {
  color: #bb0;
  stroke-width: 2.0;
}
#marker-horizon {
  color: #0bb;
}
#cursor {
  color: #f33;
  stroke-width: 2.0;
}